vuex是一個專門為vue.js設計的集中式狀態管理架構，——數據倉庫。 狀態：在這可以理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫狀態，簡單的說就是data中需要共用的屬性。 比如：我們有幾個頁面需要顯示用戶名稱和用戶等級，或者用戶的地理位置。如果我們不把這些屬性設置為狀態，那每個頁面遇到后，都會到服務器進行查找計算，返回后再顯示。在中大型項目中會有很多共用的數據，這我們就用到了vuex。

第1節：初出茅廬 來個小Demo

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

npm n install vuex --save

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

2.新建一個vuex文件夾（這個不是必須的），并在文件夾下新建store.js文件，文件中引入我們的vue和vuex。

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

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

Vue.use(Vuex);

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

** 入門小Demo(推薦視頻觀看)： **

我們這個小案例先聲明一個state的count狀態，在頁面中使用顯示這個count，然后可以利用按鈕進行加減

就是這個程序，不過我們這次要用的是vuex來進行制作，并實現數據的共享。

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++;
},
reduce(state){
    state.count--;
    }
}

這里的mutations是固定的寫法，意思是改變的，我們到時候會用一節課專門講這個mutations，所以你先不用著急，只知道我們要改變state的數值的方法，必須寫在mutations里就可以了。

5.在count.vue模板中加入兩個按鈕，并調用mutations中的方法。

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

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

第2節：state訪問狀態對象

在第1節我們已經寫了一個 const state ，這個就是我們說的訪問狀態對象，它就是我們SPA（單頁應用程序）中的共享值。今天我們主要學習狀態對象賦值給內部對象，也就是把stroe.js中的值，賦值給我們模板里data中的值。我們有三種賦值方式，我們一個一個來學習一下。

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

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

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

這里需要注意的是return this.store的。這種寫法很好理解，但是寫起來是比較麻煩的，那我們來看看第二種寫法

二、通過mapState的對象來賦值

我們首先要用import引入mapState。

import {mapState} from 'vuex';

然后還在computed計算屬性里寫如下代碼：

computed:mapState({
    count:state=>state.count
})

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

** 三、通過mapState的數組來賦值 **

computed:mapState(["count"])

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

第3節：Mutations修改狀態

上節課我們學習了怎么樣讀取state，那今天我們學習一下怎么樣修改狀態。這個常量我們在第一節課的時候也碰到過，并且進行了加減的操作。那這節課我們就具體學習一下，如何操作Mutations。

** $store.commit( ) **

Vuex提供了commit方法來修改狀態，我們粘貼出第一節課的代碼內容，簡單回顧一下，我們在button上的修改方法。

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

store.js文件：

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

**傳值： **

這只是一個最簡單的修改狀態的操作，在實際項目中我們常常需要在修改狀態時傳值。比如上邊的例子，是我們每次只加1，而現在我們要通過所傳的值進行相加。其實我們只需要在Mutations里再加上一個參數，并在commit的時候傳遞就就可以了。我們來看具體代碼：

現在store.js文件里給add方法加上一個參數n。添加的地方我已經標黃了。

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

在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>

第4節：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"])

這就是getters的用法

第5節：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里邊的方法。細心的小伙伴會發現這兩個方法傳遞的參數也不一樣。

context：上下文對象，這里你可以理解稱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提前執行’這句話。

第6節：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;
    }
},

Vuex整個模塊的代碼示例：

Count.vue:

<template>
<dic>
    <h2>{{ msg }}</h2><hr/>
    <!-- 模塊 -->
    <!-- <h2>{{ $store.state.a.count }}</h2><hr/> -->
    <h3>{{$store.state.a.count}}--{{count}}</h3>
    <p>
        <button @click="$store.commit('add',10)" style="width:100px;height:40px;background-color:#ccc">加</button>
        <!-- <button @click="$store.commit('reduce')">減</button> -->
        <button @click="reduce">減</button>
    </p>
    <p>
        <button @click="addAction" style="width:100px;height:40px;background-color:#ccc">加</button>
        <button @click="reduceAction">減</button>
    </p>
</dic>
</template>
<script>
import store from '@/vuex/store';
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
export default {
        data() {
            return {
                msg:'Hello Vuex'
            }
        },
        // 方法一computed:{
        //     count(){
        //         return this.$store.state.count;
        //     }
        // },
        // 方法二computed:mapState({
        //     count:state=>state.count
        // }),
        // 方法三
        // computed:mapState(['count']),
        // ...相當于擴展
        // computed:{
        //     ...mapState(['count']),
        //     count(){
        //         return this.$store.getters.count;
        //     }
        // },
        computed:{
            //...mapState(['count']),
            // ...mapGetters(['count']),
            count(){
                return this.$store.state.a.count;
            }
        },
        // methods:mapMutations(['add', 'reduce']),
        methods:{
            ...mapMutations(['add', 'reduce']),
            ...mapActions(['addAction','reduceAction'])
        },
        store
}
</script>

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Count from '@/components/Count'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/count',
      component: Count
    }
  ]
})

store.js:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

// 聲明一個常量 1然后暴露出去
// 即 共享對象
const state={
    count:3
}

// 改變 狀態的值 修改狀態（同步）
// 改變狀態的方法
const mutations={
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

// 過濾
const getters={
    count:function(state){
        return state.count +=20;
    }
}

// 異步修改
const actions={
    // context 上下文對象 store？
    addAction(context){
        context.commit('add',10);
        // 延時執行
        setTimeout(()=>{context.commit('reduce')},3000);
        console.log("三秒后執行減一，比reduce先執行");
    },
    reduceAction({commit}){
        commit('reduce');
    }
}

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

const moduleB={
    state,
    mutations,
    getters,
    actions
}
export default new Vuex.Store({
    // a式自己隨便起的名字  后面跟上面定義的moduleA
    //modules:{a:moduleA,moduleB}
    modules:{a:moduleA}
})