vuex核心

最詳細的Vuex教程

---

什麼是Vuex？

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

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

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

npm install vuex --save

• 1

要注意的是這裏必定要加上 –save，由於你這個包咱們在生產環境中是要使用的。

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

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

• 1
• 2

三、使用咱們vuex，引入以後用Vue.use進行引用。

Vue.use(Vuex);

• 1

經過這三步的操做，vuex就算引用成功了，接下來咱們就能夠盡情的玩耍了。

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

import storeConfig from './vuex/store'

• 1

五、再而後 , 在實例化 Vue對象時加入 store 對象 :

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

初出茅廬 來個Demo

一、如今咱們store.js文件裏增長一個常量對象。store.js文件就是咱們在引入vuex時的那個文件。

 const state = { count:1 }

• 1
• 2
• 3

二、用export default 封裝代碼，讓外部能夠引用。

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

• 1
• 2
• 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>

 

 

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

這裏的mutations是固定的寫法，意思是改變的，因此你先不用着急，只知道咱們要改變state的數值的方法，必須寫在mutations裏就能夠了。

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

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

• 1
• 2
• 3
• 4

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

state訪問狀態對象

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

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

1、 經過computed的計算屬性直接賦值

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

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

• 1
• 2
• 3
• 4
• 5

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

2、經過mapState的對象來賦值

咱們首先要用import引入mapState。

import {mapState} from 'vuex';

• 1

而後還在computed計算屬性裏寫以下代碼：

computed:mapState({ count:state=>state.count //理解爲傳入state對象，修改state.count屬性 })

• 1
• 2
• 3

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

3、經過mapState的數組來賦值

computed:mapState(["count"])

• 1

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

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

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

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

• 1
• 2

store.js文件：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

傳值：這只是一個最簡單的修改狀態的操做，在實際項目中咱們經常須要在修改狀態時傳值。好比上邊的例子，是咱們每次只加1，而如今咱們要經過所傳的值進行相加。其實咱們只須要在Mutations裏再加上一個參數，並在commit的時候傳遞就就能夠了。咱們來看具體代碼：

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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

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

• 1
• 2
• 3
• 4

模板獲取Mutations方法

實際開發中咱們也不喜歡看到$store.commit( )這樣的方法出現，咱們但願跟調用模板裏的方法同樣調用。 
例如：@click=」reduce」 就和沒引用vuex插件同樣。要達到這種寫法，只須要簡單的兩部就能夠了：

一、在模板count.vue裏用import 引入咱們的mapMutations：

import { mapState,mapMutations } from 'vuex';

• 1

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

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

• 1
• 2
• 3

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

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

• 1

getters計算過濾操做

getters從表面是得到的意思，能夠把他看做在獲取數據以前進行的一種再編輯,至關於對數據的一個過濾和加工。你能夠把它看做store.js的計算屬性。

getters基本用法：

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

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

• 1
• 2
• 3
• 4
• 5

寫好了gettters以後，咱們還須要在Vuex.Store()裏引入，因爲以前咱們已經引入了state和mutations，因此引入裏有三個引入屬性。代碼以下，

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

• 1
• 2
• 3

在store.js裏的配置算是完成了，咱們須要到模板頁對computed進行配置。在vue 的構造器裏邊只能有一個computed屬性，若是你寫多個，只有最後一個computed屬性可用，因此要對上節課寫的computed屬性進行一個改造。改造時咱們使用ES6中的展開運算符」…」。

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

• 1
• 2
• 3
• 4
• 5
• 6

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

用mapGetters簡化模板寫法

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

首先用import引入咱們的mapGetters

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

• 1

在computed屬性中加入mapGetters

...mapGetters(["count"])

• 1

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') } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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

• 1
• 2
• 3
• 4

改造一下咱們的methods方法，首先仍是用擴展運算符把mapMutations和mapActions加入。

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

• 1
• 2
• 3
• 4
• 5
• 6

你還要記得用import把咱們的mapActions引入纔可使用。

增長異步檢驗

咱們如今看的效果和咱們用Mutations做的如出一轍，確定有的小夥伴會好奇，那actions有什麼用，咱們爲了演示actions的異步功能，咱們增長一個計時器（setTimeOut）延遲執行。在addAction裏使用setTimeOut進行延遲執行。

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

• 1
• 2

咱們能夠看到在控制檯先打印出了‘我比reduce提早執行’這句話。

module模塊組

隨着項目的複雜性增長，咱們共享的狀態愈來愈多，這時候咱們就須要把咱們狀態的各類操做進行一個分組，分組後再進行按組編寫。那今天咱們就學習一下module：狀態管理器的模塊組操做。

聲明模塊組：

在vuex/store.js中聲明模塊組，咱們仍是用咱們的const常量的方法聲明模塊組。代碼以下:

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

 

聲明好後，咱們須要修改原來 Vuex.Stroe裏的值：

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

• 1
• 2
• 3

在模板中使用

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

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

• 1

若是想用簡單的方法引入，仍是要在咱們的計算屬性中rutrun咱們的狀態。寫法以下：

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