使用Vuex的目的就是幫助我們管理多個組件的狀態(tài)。也就是實現(xiàn)數(shù)據(jù)共享，實時改變和緩存數(shù)據(jù)。
1.安裝vuex：在命令行中cd進入創(chuàng)建好的vue項目。下然后運行：npm i vuex。
2.如何引入Vuex？ 在你Vue項目中的main.js處直接導(dǎo)入 import Vuex form 'vuex'. 然后在下面輸入：vue.use(vuex)。
3.如何創(chuàng)建一個vuex：?
直接寫 const store = new Vuex.Store({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? state:{
? ? ? ? ? ? ? ? count:0,
? }
})
然后在new vue下面引入 store。即：?
new?Vue({
??store,? ?// 這里寫store即可??！看這里！！其他別管?。?/p>
??render:?h?=>?h(App),
}).$mount('#app')
4.如何使用Vuex：我們已經(jīng)在入口處創(chuàng)建了vuex，那么如何在其他頁面使用？ 很簡單，只需要在你所使用的頁面創(chuàng)建一個計算屬性即可，代碼如下：
computed:?{
????count:function(){
??????return?this.$store.state.count;
????}
??}
創(chuàng)建好這個計算屬性后我們可以隨意的使用代碼如下：
<template>
<span>{{count}}</span>
</template>
保存打開頁面你會看到0在頁面上。如果完成了這一步你已經(jīng)成功的使用了Vuex。
5.接下來我們vuex的第二個屬性，mutations。這個代碼在main.js中。它可以改變我們創(chuàng)建的state里面count的值。你明白mutations就是用來改變count的值就行了。
const?store?=?new?Vuex.Store({
??state:?{
????count:0,
??},
??mutations:?{
????increment(state){
??????state.count++
????}
??}
}
上面的代碼就是在原有基礎(chǔ)中加了兩行，有一個increment函數(shù)，這個是什么不要管，你知道它存在就行，然后里面?zhèn)魅肓艘粋€state。又做了一個?state.count++ 運算，意思就是讓count ++
在模板中我們需要加入一個button按鈕。
<template>
<span>{{count}}</span>
??<button?@click="$store.commit('increment')">count++</button>
</template>
這個代碼也就是上面代碼新加了一行！ 一個點擊事件，$store獲取到我們創(chuàng)建的Store。然后一個commit方法傳入我們剛才mutations定義的'increment'，你別問什么意思，照著寫，使用mutations一定用commit方法然后里面?zhèn)魅胍粋€'increment'就行。
保存打開你的vue頁面點擊按鈕應(yīng)該會執(zhí)行加一的操作。到了這一步Vuex已經(jīng)會一半了！
下面還有一個actions getters方法，也特別簡單，有同學(xué)想看的話留言馬上更新。
