Vue —— VueX精講(1）

BM老李發表於2020-06-11

大綱

這一講我們最主要的就是學習vue中的資料管理VueX，這個是一個大殺器

一、回顧一些Promise相關的東西

Promise 有幾個比較重要的方法，最重要的還是有一個叫做all的方法，這個也是非常的強大的

假設我們目前要求，希望能按順序的拿到先後的兩個ajax那麼我應該怎麼處理呢

Promse.all( [
new Promose( ( resolve,rejcet ) => {
        $.ajax({
            url:'xxxx',
            data:'xxxx',
            sucess:(res) => {
                resolve(res)
            }
        })
        $.ajax({
            url:'xxxx',
            data:'xxxx',
            sucess:(res) => {
                resolve(res)
            }
        })
    })

]).then( results => {
    consel.log(results)
    // 這樣拿到的就是一個陣列了， 先後的順序就是裡面的值
} )

注意啊這裡對promise的深入的解釋說明

首先我們的兩個回撥resolve 還有reject注意啊，

這兩個回撥回撥函式是 在傳入的時候定義的，但是呼叫是在promse裡調的！這兩個引數是函式！！函式！！回撥函式！

一、概念

Vue官方介紹
絕大多數的管方都非常喜歡用概念來解釋概念，這就有點難搞了，我這個概念的都不懂，你又給我搞另一個概念
實際上那個Vuex就是一個大管家，統一進行管理，全域性的單例模式

1.最通俗的解釋

Vuex實際上就是一個用來放一些元件共享的資料的，實際上這可能是是下面這些情況

登入
假設我們目前有50+頁面。我們都每一個頁面都要傳送介面請求而且這些請求需要token，那麼如果我是登入的，我就需要在每一個頁面拿到我的登入token這樣就造成了資料的傳來傳去非常麻煩，如果我們有一個公共的地方來放這些東西就好了
購物車。收藏
也會有這種元件之間打出傳值的情況發生，那麼我如何管理這些東西呢，這個就是一個問題

綜上所述，我們需要使用Vuex*

二、如何入門的使用

2.簡單的使用

這裡假設有這樣的一個需求：我們目前有兩個元件App.vue 還有BMlaoli.vue 我呢，他們之間有層級的關係，app裡面有一個變數叫做contuend 我希望我在app裡面對countend的操作能夠動態的傳遞到我們的BMlaoli裡，而且不使用父子元件傳值，那麼我們如何做呢？親看下面講演

首先我們需要有兩個元件
他們都是最基礎的樣子

App

<template>
  <div id="app">
    <h1> 我是vueapp </h1>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
</style>

BMlaoli


<template>
    <div>
        <h1>我是bm介面</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="sass" scoped>

</style>

app的業務邏輯

<template>
  <div id="app">
    <p>{{contuned}}</p>
    
      <button @click="contuned ++" >+</button>
      <button @click="contuned --" >-</button>

  </div>
</template>

<script>

import bmlao from '@/components/Bmlaoli';

export default {
  name: 'App',
  components: {
    bmlao,
  },
  data() {
    return {
      contuned: 100
    }
  },
}
</script>

<style>
</style>

但是問題來了，我目前希望你們在app裡面做的更改可以反映到我的Bm元件裡，而且不通過父子元件的方式，那麼我該怎麼做呢？實際上非常的簡單

這個時候我們就需要一個 ‘第三者來處理這個東西’,這個第三者就是這個Vuex。

vueX的引入

實際上，如果你有手動的安裝使用配VueRouter的經驗的話。這Vuex也是差不多的都是一樣的使用方法

第一步：npm install vuex
第二步：建立一個資料夾sote裡寫一個index.js
第三部：在index裡面安裝
第四部：在main裡掛載就好了

index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 安裝
Vue.use(Vuex)

// 使用
const store = new Vuex.Store({
    state:{},
    mutations: {
    },
    actions:{},
    getters:{},
    modules:{}

})

// 倒出
export default store

main.js

import Vue from 'vue'
import App from './App.vue'

// 匯入
import Store from './store'

Vue.config.productionTip = false

// 掛載
new Vue({
  Store,
  render: h => h(App),
}).$mount('#app')

非常的簡單

app裡的業務邏輯

<template>
  <div id="app">
    <p>{{ $store.state.contuned }}</p>
    
      <button @click="$store.state.contuned ++" >+</button>
      <button @click="$store.state.contuned --" >-</button>
    
    <h1>------bmlaoli的介面--------</h1>

    <bmlao></bmlao>

  </div>
</template>

<script>

import bmlao from '@/components/Bmlaoli';

export default {
  name: 'App',
  components: {
    bmlao,
  },
  data() {
    return {
      // contuned: 100
    }
  },
}
</script>

<style>
</style>

三、正確的操作state的方式

1.需要注意的地方

$store.state.contuned

需要非常說的就是請你不要這樣去修改vuex裡的值，而是通過如下的方式去修改，詳細見官方api說明

概述我們的更改邏輯
view檢視提交（Dispatch） ----> actions處理非同步操作（commit） -----> Muations 記錄你的修改，方便以後追蹤（Mutate） -----> state修改（render）
程式碼邏輯
/state/index.js

    state:{
        contuned:1000
    },
    mutations: {
        increment(state){
            state.contuned++
        },
        decrement(state){
            state.contuned--
        },
    },
    actions:{},
    getters:{},
    modules:{}

/app.vue

<template>
  <div id="app">
    <p>{{ $store.state.contuned }}</p>
    
      <button @click="additon" >+</button>
      <button @click="subraction" >-</button>
    
    <h1>------bmlaoli的介面--------</h1>

    <bmlao></bmlao>

  </div>
</template>

<script>

import bmlao from '@/components/Bmlaoli';

export default {
  name: 'App',
  components: {
    bmlao,
  },
  data() {
    return {
      // contuned: 100
    }
  },
  methods: {
    additon() {
      this.$store.commit('increment')
    },
    subraction() {
      this.$store.commit('decrement')
      
    },
  },
}
</script>

<style>
</style>

這樣我們就能開發者工具追綜這些東西的變化了

四、核心概念解讀

vueX中有五個核心

1.單一狀態樹

管理系統現實生活中的例子
我們先來舉一個例子，在我們國家一個人有很多的資訊會被記錄到檔案管理的各個部門，車貸房貸，身份證，戶口，結婚登記，這些資訊都分散式的存放在各個局，地產局，戶口部門......，這樣對於我們的人來說，我們的資料來來源就是多樣的，多資料來源，但是這樣有問題，就是一起管理的時候是不好管理的，你可能需要去這個地方蓋章，去哪個地方改造，如果不通過又要重新回來蓋章，XXXX太麻煩了。
vuex的管理邏輯
在我們的vue中確確實實，你可以new 多個Vuex但是，我們是不推薦的，因為這樣管理起來就會非常的麻煩，我們的vuex推薦是只使用一個vuex來管理共享的資料來源，這個設計理念就是；單一資料來源（也叫單一狀態樹）

2.getter

這個東西類似於計算屬性
有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數：
高階函式，返回函式的呼叫

需求，還是原來的案例，我希望我獲取的contuned的平方

當然了，你這樣也是可以的

  <h2>{{ $store.state.contuned * $store.state.contuned }}</h2>

但是很low 是不啦，如果你要寫很多很多的複雜邏輯操作，那不就涼涼了嗎，所以這裡引申出我們的getter，字面理解就是獲取的時候，對資料做一些手腳，那麼我們看看如何使用

明確一下，我們的操作基本上都是在我們的vuex檔案裡面進行的

在getter裡面搞事情
store/index.js


import Vue from 'vue'
import Vuex from 'vuex'
// 安裝
Vue.use(Vuex)

// 使用
const store = new Vuex.Store({
    state:{
        contuned:1000
    },
    mutations: {
        increment(state){
            state.contuned++
        },
        decrement(state){
            state.contuned--
        },
    },
    actions:{},
    getters:{
        powerCounter(state){
            return state.contuned * state.contuned 
        }
    },
    modules:{}

})

// 倒出
export default store

使用的時候就非常簡單了
/bmlaoli.vue

  <h2>{{ $store.getters.powerCounter }}</h2>

現在我們又有了另一個需求，如果我想傳遞引數，怎麼辦，我希望我過濾出一些資料，而且我們希望我們是指定條件的過濾
這裡就涉及到我們的傳遞引數的問題了
store/index.js


  fliter(state,getters){
    console.log(getters)//這裡的getters實際上就是你的整個外面的getters物件 

  // 如果你要傳遞引數，你只能返回函式的呼叫
      return age => {
        state.students.filter( s => s.age >= age )
      }
    }

/bmlaoli.vue

原資料
 <h2>{{ $store.getters.students }}</h2>
過濾之後
 <h2>{{ $store.getters.fliter(40) }}</h2>

3.mutation

vuex唯一更新狀態的方式,就是在這裡,如果你要更改資料，vuex唯一的更改方式就是 mutation

3.1 概念

事件型別（函式名）
回撥函式（回撥函式，具體的業務程式碼）

mutations: {
//      increment 事件型別
// (state){ 回撥函式
            // state.contuned++
        // },
        increment(state){
            state.contuned++
        },

        decrement(state){
            state.contuned--
        },
    },

3.2 傳遞引數payload負載

單個引數
多引數（傳遞物件）

需求：我們希望點選更改狀態的時候的時候可傳入引數
/sotre/index.js


   mutations: {
        increment(state){
            state.contuned++
        },
        decrement(state){
            state.contuned--
        },
        incrementCour(state,palyload){
            consle.log(palyload)//拿到了一個傳遞過來的物件
        }
    },

bmlaoliu.vue3

addcCount(parmas){
this.$sore.commit( 'incrementCour' ,palyload)
}

Vue —— 精講 VueRouter（1）
2020-06-14
Vue
CUDA精講（1）
2020-10-09
Vue（1）之—— Vuex學習筆記
2019-03-20
Vue筆記
vue - Vuex
2022-05-10
Vue
方法精講-言語1筆記
2024-08-16
筆記
Vue--Vuex
2018-03-19
Vue
VueX Vue: Could not find a declaration file for module vuex.
2024-06-24
Vue
vue實踐之vuex
2019-03-03
Vue
vue狀態共享--VUEX
2024-06-16
Vue
Vue踩坑之旅——Vuex
2018-03-26
Vue
Vuex學習（1）
2019-06-12
Vue
Synchronized 精講
2021-01-11
synchronized
vue+vue-router+vuex地址管理思路
2019-03-04
Vue
vue 學習筆記 - vuex
2019-02-27
Vue筆記
vue升級之路（四）-- Vuex
2018-09-21
Vue
Vue入門到跑路---Vuex
2020-11-03
Vue
vue實踐04之vuex
2018-04-12
Vue
【Vue 極速指南】Vuex 篇
2021-09-09
Vue
Vue+Vue-router+Vuex專案實戰
2019-03-19
Vue
Mysql 索引精講
2019-05-08
MySql索引
VUE全家桶之vuex的使用
2019-03-27
Vue
【vue-系列】深入理解Vuex
2019-12-28
Vue
Vue教程23：Vuex非同步Action
2019-01-01
Vue非同步
Vuex——Vue的狀態管理利器
2021-09-09
Vue
vue--vuex 中 Modules 詳解
2022-04-16
Vue
vuex報錯 vuex__WEBPACK_IMPORTED_MODULE_1__.default.store is not a constructor
2020-11-22
VueWebImportStruct
精講Redis：持久化
2018-06-21
Redis持久化
vue的狀態管理模式—vuex
2018-10-19
Vue模式
在Vue3中使用vuex
2024-10-09
Vue
vue（23）Vuex的5個核心概念
2021-07-26
Vue
vue（22）Vuex的安裝與使用
2021-07-24
Vue
vue 快速入門系列 —— Vuex 基礎
2021-10-18
Vue
vue--vuex 狀態管理模式
2022-04-08
Vue模式
手摸手教你在vue-cli裡面使用vuex，以及vuex簡介
2019-03-04
Vue
Vue3.0+vue-router-next+vuex4.0+typescript專案搭建
2020-04-29
VueTypeScript
React高階元件精講
2018-09-14
React元件
Java設計模式精講
2019-05-20
Java設計模式
1.vuex是什麼？ 2.vuex的核心概念；（vuex的屬性；vuex的資料傳遞流程；） 3.為什麼要用vuex？
2021-01-01
Vue