vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。簡(jiǎn)單的說(shuō)就是data中需要共用的屬性。比如：我們有幾個(gè)頁(yè)面要顯示用戶名稱和用戶等級(jí)，或者顯示用戶的地理位置。如果我們不把這些屬性設(shè)置為狀態(tài)，那每個(gè)頁(yè)面遇到后，都會(huì)到服務(wù)器進(jìn)行查找計(jì)算，返回后再顯示。在中大型項(xiàng)目中會(huì)有很多共用的數(shù)據(jù)，所以就有了vuex。

引入vuex

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

npm install vuex --save

如果是mac用戶沒(méi)有權(quán)限的話在前面加上sudo

sudo npm install vuex --save

如果電腦沒(méi)有翻墻的話可以使用國(guó)內(nèi)的淘寶鏡像cnpm，速度飛起來(lái)了。
需要注意的是這里一定要加上 –save，因?yàn)槟氵@個(gè)包我們?cè)谏a(chǎn)環(huán)境中是要使用的。

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

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

3.使用我們vuex，引入之后用Vue.use進(jìn)行引用。

Vue.use(Vuex);

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

入門小Demo

我們這個(gè)小案例先聲明一個(gè)state的count狀態(tài)，在頁(yè)面中使用顯示這個(gè)count，然后可以利用按鈕進(jìn)行加減，如果你看過(guò)我的文章，你一定知道，在我們學(xué)基礎(chǔ)知識(shí) 的時(shí)候經(jīng)常編寫(xiě)這個(gè)程序。我們來(lái)張圖片幫大家回憶一下。

圖一

就是這個(gè)程序，不過(guò)我們這次要用的是vuex來(lái)進(jìn)行制作，并實(shí)現(xiàn)數(shù)據(jù)的共享。

1.現(xiàn)在我們store.js文件里增加一個(gè)常量對(duì)象。store.js文件就是我們?cè)谝雟uex時(shí)的那個(gè)文件。

const state={
    count:1
}

2.用export default 封裝代碼，讓外部可以引用。

export default new Vuex.Store({
    state
})

3.新建一個(gè)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文件中加入兩個(gè)改變state的方法。

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

mutations是固定的寫(xiě)法，意思是改變的
5.在count.vue模板中加入兩個(gè)按鈕，并調(diào)用mutations中的方法。

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

state訪問(wèn)狀態(tài)對(duì)象

一、通過(guò)computed的計(jì)算屬性直接賦值
computed屬性可以在輸出前，對(duì)data中的值進(jìn)行改變，我們就利用這種特性把store.js中的state值賦值給我們模板中的data值。

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

二、通過(guò)mapState的對(duì)象來(lái)賦值
我們首先要用import引入mapState。

import {mapState} from 'vuex';

然后還在computed計(jì)算屬性里寫(xiě)如下代碼：

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

這里我們使用ES6的箭頭函數(shù)來(lái)給count賦值。

Mutations修改狀態(tài)

$store.commit( )

Vuex提供了commit方法來(lái)修改狀態(tài)，我們粘貼出第一節(jié)課的代碼內(nèi)容，簡(jiǎn)單回顧一下，我們?cè)赽utton上的修改方法。

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

store.js文件：

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

模板獲取Mutations方法

在模板count.vue里用import 引入我們的mapMutations：

import { mapState,mapMutations } from 'vuex';

在模板的<script>標(biāo)簽里添加methods屬性，并加入mapMutations

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

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

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