vuex實戰筆記

 

Vuex 是什麼？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

首先   用Vue腳手架工具構建好一個項目，在控制命令行中輸入下邊的命令下載一個vue webpack模版

 

啓動項目

 

 

看到這個界面，接着着手使用vuex，爲了便於vuex例子更快實現，刪掉 默認的一些代碼。如圖：

 

頁面內容只剩下一行文字如下：

 

下面開始第一步：引入vuex

利用npm包管理工具，進行安裝 vuex

npm install vuex --save

這裏加上 –save，因爲這個包在生產環境中是要使用的。

tips:   -save-dev是指將包信息添加到devDependencies，表示你開發時依賴的包裹。 

           -save是指將包信息添加到dependencies，表示你發佈時依賴的包裹。 
           例如，我們在開發時會用到gulp來壓縮我們的文件。這是我們的gulp包信息就會添加到devDependencies，我們在發佈.              時發佈壓縮文件，並不要用到gulp。 
           利用nodejs構建的服務器在發佈後會經常被訪問用到，http包的信息就會添加到 dependencies區域。

 

 

 

第二步  新建一個store.js文件，文件中引入vue和vuex

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

第三步 使用vuex，引入之後用Vue.use進行引用。

 Vue.use(Vuex);

通過這三步操作，vuex就算引用成功了

第四步  在main.js 中引入新建的vuex文件

第五步 , 在實例化 Vue對象時加入 store 對象 

如圖：

 

接下來。在store.js文件裏增加一個常量對象，並用export default 封裝代碼，讓外部可以引用

如圖：

 

現在直接可以用{{$store.state.count}}輸出count 的值，如圖

 

 

如果main.js沒有引入 store，報錯如下：

用store 的話 必須import 如圖

 

解決報錯

在store.js文件中加入兩個改變state的方法。

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

mutations是固定的寫法，意思是改變的，要改變state的數值的方法，必須寫在mutations裏,然後再導出一下，如圖

 

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

 

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

 

state訪問狀態對象

state ，這個就是訪問狀態對象，它就是SPA（單頁應用程序）中的共享值。

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

 

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

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

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

修改HelloWorld.vue代碼, 直接可以訪問count  就不用$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賦值。

computed:mapState(["count"])

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

 

現在已經知道這三種方法是有異曲同工之妙

接下來來看  Mutations修改狀態（$store.commit( )）

Vuex提供了commit方法來修改狀態

 

在實際項目中常常需要在修改狀態時傳值。比如上邊的例子，是我們每次只加1，而現在要通過所傳的值進行相加。其實只需要在Mutations裏再加上一個參數，並在commit的時候傳遞就就可以了。

現在store.js文件裏給add方法加上一個參數n。

在HelloWorld.vue裏修改按鈕的commit( )方法傳遞的參數，傳遞8，意思就是每次加8.

 

 

模板獲取Mutations方法

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

1、在模板HelloWorld.vue裏用import 引入mapMutations：

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

在模板中直接使用我reduce或者add方法，就像下面這樣

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

 

可以看到以上兩種方法是等同的

getters計算過濾操作

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

 

getters基本用法：

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

 

寫好了gettters之後，還需要在Vuex.Store()裏引入，代碼如下，

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

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

 

用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對象傳遞過來，可以讓方法體邏輯和代碼更清晰明瞭。

 

模板中的使用

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

 

 

演示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狀態，要用插值的形式寫入

{{$store.state.a.count}}

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

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