最詳細的Vuex教程【修正了某些細節錯誤】

阿新 • • 發佈：2018-12-30

最詳細的Vuex教程

什麼是Vuex？

vuex是一個專門為vue.js設計的集中式狀態管理架構。狀態？我把它理解為在data中的屬性需要共享給其他vue元件使用的部分，就叫做狀態。簡單的說就是data中需要共用的屬性。

引入Vuex（前提是已經用Vue腳手架工具構建好專案）

1、利用npm包管理工具，進行安裝 vuex。在控制命令列中輸入下邊的命令就可以了。

    npm install vuex --save

要注意的是這裡一定要加上 –save，因為你這個包我們在生產環境中是要使用的。

2、新建一個store資料夾（這個不是必須的），並在資料夾下新建store.js檔案，檔案中引入我們的vue和vuex。

    import Vue from 'vue';
    import Vuex from 'vuex';

3、使用我們vuex，引入之後用Vue.use進行引用。

    Vue.use(Vuex);

通過這三步的操作，vuex就算引用成功了，接下來我們就可以盡情的玩耍了。

4、在main.js 中引入新建的vuex檔案

    import storeConfig from './vuex/store'

5、再然後 , 在例項化 Vue物件時加入 store 物件 :

    new Vue({
      el 
: '#app',
      router,
      store,//使用store
      template: '<App/>',
      components: { App }
    })

初出茅廬來個Demo

1、現在我們store.js檔案裡增加一個常量物件。store.js檔案就是我們在引入vuex時的那個檔案。

    const state = {
        count:1
    }

2、用export default 封裝程式碼，讓外部可以引用。

    export default new Vuex.Store({
        state
    });

3、新建一個vue的模板，位置在components資料夾下，名字叫count.vue。在模板中我們引入我們剛建的store.js檔案，並在模板中用{{$store.state.count}}輸出count 的值。

    <template>
        <div>
            <h2>{{msg}}</h2>
            <hr/>
            <h3>{{$store.state.count}}</h3>
        </div>
    </template>
    <script>
        import store from '@/vuex/store'
        export default{
            data(){
                return{
                    msg:'Hello Vuex',

                }
            },
            store

        }
    </script>

4、在store.js檔案中加入兩個改變state的方法。

    const mutations={
        add(state){
            state.count+=1;
        },
        reduce(state){
            state.count-=1;
        }
    }

這裡的mutations是固定的寫法，意思是改變的，所以你先不用著急，只知道我們要改變state的數值的方法，必須寫在mutations裡就可以了。

5、在count.vue模板中加入兩個按鈕，並呼叫mutations中的方法。

    <div>
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('reduce')">-</button>
    </div>

這樣進行預覽就可以實現對vuex中的count進行加減了。

state訪問狀態物件

const state ，這個就是我們說的訪問狀態物件，它就是我們SPA（單頁應用程式）中的共享值。

學習狀態物件賦值給內部物件，也就是把stroe.js中的值，賦值給我們模板裡data中的值。有三種賦值方式

一、通過computed的計算屬性直接賦值

computed屬性可以在輸出前，對data中的值進行改變，我們就利用這種特性把store.js中的state值賦值給我們模板中的data值。

    computed:{
        count(){
            return this.$store.state.count;
        }
    }

這裡需要注意的是return this.$store.state.count這一句，一定要寫this，要不你會找不到$store的。這種寫法很好理解，但是寫起來是比較麻煩的，那我們來看看第二種寫法。

二、通過mapState的物件來賦值

我們首先要用import引入mapState。

    import {mapState} from 'vuex';

然後還在computed計算屬性裡寫如下程式碼：

    computed:mapState({
            count:state=>state.count  //理解為傳入state物件，修改state.count屬性
     })

這裡我們使用ES6的箭頭函式來給count賦值。

三、通過mapState的陣列來賦值

    computed:mapState(["count"])

這個算是最簡單的寫法了，在實際專案開發當中也經常這樣使用。

Mutations修改狀態（$store.commit( )）

Vuex提供了commit方法來修改狀態，我們粘貼出Demo示例程式碼內容，簡單回顧一下，我們在button上的修改方法。

    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>

store.js檔案：

    const mutations={
        add(state){
            state.count+=1;
        },
        reduce(state){
            state.count-=1;
        }
    }

傳值：這只是一個最簡單的修改狀態的操作，在實際專案中我們常常需要在修改狀態時傳值。比如上邊的例子，是我們每次只加1，而現在我們要通過所傳的值進行相加。其實我們只需要在需要傳參的Mutation(Mutations物件中的每個方法都是一個Mutation)裡再加上一個引數，並在commit的時候傳遞就就可以了。我們來看具體程式碼：

現在store.js檔案裡給add方法加上一個引數n。

    const mutations={
        add(state,n){
            state.count+=n;
        },
        reduce(state){
            state.count-=1;
        }
    }

在Count.vue裡修改按鈕的commit( )方法傳遞的引數，我們傳遞10，意思就是每次加10.

    <p>
       <button @click="$store.commit('add',10)">+</button>
       <button @click="$store.commit('reduce')">-</button>
    </p>

模板獲取Mutations方法

實際開發中我們也不喜歡看到$store.commit( )這樣的方法出現，我們希望跟呼叫模板裡的方法一樣呼叫。
例如：@click=”reduce” 就和沒引用vuex外掛一樣。要達到這種寫法，只需要簡單的兩部就可以了：

1、在模板count.vue裡用import 引入我們的mapMutations：

    import { mapState,mapMutations } from 'vuex';

2、在模板的<\script>標籤裡新增methods屬性，並加入mapMutations

     methods:mapMutations([
            'add','reduce'
    ]),

通過上邊兩部，我們已經可以在模板中直接使用我們的reduce或者add方法了，就像下面這樣。

    <button @click="reduce">-</button>

getters計算過濾操作

getters從表面是獲得的意思，可以把他看作在獲取資料之前進行的一種再編輯,相當於對資料的一個過濾和加工。你可以把它看作store.js的計算屬性。

getters基本用法：

比如我們現在要對store.js檔案中的count進行一個計算屬性的操作，就是在它輸出前，給它加上100.我們首先要在store.js裡用const宣告我們的getters屬性。

    const getters = {
        count:function(state){
            return state.count +=100;
        }
    }

寫好了gettters之後，我們還需要在Vuex.Store()裡引入，由於之前我們已經引入了state和mutations，所以引入裡有三個引入屬性。程式碼如下，

    export default new Vuex.Store({
        state,mutations,getters
    })

在store.js裡的配置算是完成了，我們需要到模板頁對computed進行配置。在vue 的構造器裡邊只能有一個computed屬性，如果你寫多個，只有最後一個computed屬性可用，所以要對上節課寫的computed屬性進行一個改造。改造時我們使用ES6中的展開運算子”…”。

    computed:{
        ...mapState(["count"]),
        count(){
            return this.$store.getters.count;
        }
    },

需要注意的是，你寫了這個配置後，在每次count 的值發生變化的時候，都會進行加100的操作。

用mapGetters簡化模板寫法

我們都知道state和mutations都有map的引用方法把我們模板中的編碼進行簡化，我們的getters也是有的，我們來看一下程式碼。

首先用import引入我們的mapGetters

    import { mapState,mapMutations,mapGetters } from 'vuex';

在computed屬性中加入mapGetters

    ...mapGetters(["count"])

actions非同步修改狀態

actions和之前講的Mutations功能基本一樣，不同點是，actions是非同步的改變state狀態，而Mutations是同步改變狀態。至於什麼是非同步什麼是同步這裡我就不做太多解釋了，如果你不懂自己去百度查一下吧。

在store.js中宣告actions

actions是可以呼叫Mutations裡的方法的，我們還是繼續在上節課的程式碼基礎上進行學習，在actions裡呼叫add和reduce兩個方法。

    const actions ={
        addAction(context){
            context.commit('add',10)
        },
        reduceAction({commit}){
            commit('reduce')
        }
    }

在actions裡寫了兩個方法addAction和reduceAction，在方法體裡，我們都用commit呼叫了Mutations裡邊的方法。細心的小夥伴會發現這兩個方法傳遞的引數也不一樣。

ontext：上下文物件，這裡你可以理解稱store本身。
{commit}：直接把commit物件傳遞過來，可以讓方法體邏輯和程式碼更清晰明瞭。

模板中的使用

我們需要在count.vue模板中編寫程式碼，讓actions生效。我們先複製兩個以前有的按鈕，並改成我們的actions裡的方法名，分別是：addAction和reduceAction。

    <p>
      <button @click="addAction">+</button>
      <button @click="reduceAction">-</button>
    </p>

改造一下我們的methods方法，首先還是用擴充套件運算子把mapMutations和mapActions加入。

    methods:{
        ...mapMutations([  
            'add','reduce'
        ]),
        ...mapActions(['addAction','reduceAction'])
    },

你還要記得用import把我們的mapActions引入才可以使用。

增加非同步檢驗

我們現在看的效果和我們用Mutations作的一模一樣，肯定有的小夥伴會好奇，那actions有什麼用，我們為了演示actions的非同步功能，我們增加一個計時器（setTimeOut）延遲執行。在addAction裡使用setTimeOut進行延遲執行。

    setTimeOut(()=>{context.commit(reduce)},3000);
    console.log('我比reduce提前執行');

我們可以看到在控制檯先打印出了‘我比reduce提前執行’這句話。

module模組組

隨著專案的複雜性增加，我們共享的狀態越來越多，這時候我們就需要把我們狀態的各種操作進行一個分組，分組後再進行按組編寫。那今天我們就學習一下module：狀態管理器的模組組操作。

宣告模組組：

在vuex/store.js中宣告模組組，我們還是用我們的const常量的方法宣告模組組。程式碼如下:

    const moduleA={
        state,mutations,getters,actions
    }

宣告好後，我們需要修改原來 Vuex.Stroe裡的值：

    export default new Vuex.Store({
        modules:{a:moduleA}
    })

在模板中使用

現在我們要在模板中使用count狀態，要用插值的形式寫入。

    <h3>{{$store.state.a.count}}</h3>

如果想用簡單的方法引入，還是要在我們的計算屬性中rutrun我們的狀態。寫法如下：

    computed:{
        count(){
            return this.$store.state.a.count;
        }
    },