vuex

• vuex是一個專門爲vue.js設計的集中式狀態管理架構。狀態？我把它理解爲在data中的屬性須要共享給其餘vue組件使用的部分，就叫作狀態。簡單的說就是data中須要共用的屬性。好比：咱們有幾個頁面要顯示用戶名稱和用戶等級，或者顯示用戶的地理位置。若是咱們不把這些屬性設置爲狀態，那每一個頁面遇到後，都會到服務器進行查找計算，返回後再顯示。在中大型項目中會有不少共用的數據，因此尤大神給咱們提供了vuex。
• (vuex官網)[https://vuex.vuejs.org/zh-cn/]

小demo練手

引入vuex

• 學vuex我一樣仍是用的vue-cli模板
• 1.利用npm包管理工具，進行安裝 vuex。在控制命令行中輸入下邊的命令就能夠了。
• npm 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

• demo截圖:
  
• 1.如今咱們store.js文件裏增長一個常量對象。store.js文件就是咱們在引入vuex時的那個文件。
• ``` const state={
  count:1
  }

- 2.用export default 封裝代碼，讓外部能夠引用。構造一個store對象
- ``` 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>

• 說明:若是store掛載在根實例上，全部的組件均可以使用這個store對象
• 4.在store.js文件中加入兩個改變state的方法。並將它也寫進store對象裏

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

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

• 說明:這裏的mutations是固定的寫法，意思是改變的，咱們後面專門講這個mutations，因此你先不用着急，只知道咱們要改變state的數值的方法，必須寫在mutations裏就能夠了。
• 5.在count.vue模板中加入兩個按鈕，並調用mutations中的方法。

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

• 這樣咱們就能夠對count加減了。能夠看到咱們在vue實例的data對象裏並無定義count這個數據，可是咱們在count.vue裏得到到了，若是你再建一個組件，一樣的使用也能獲取count這個數據，這個數據就是一個狀態了，vuex就是來管理這些狀態

state訪問狀態對象

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

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

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

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

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

2、經過mapState的對象來賦值

• 咱們首先要用import引入mapState。
  import {mapState} from 'vuex';

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

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

3、經過mapState的數組來賦值

• 當映射的計算屬性的名稱與 state 的子節點名稱相同時，咱們也能夠給 mapState 傳一個字符串數組。

computed:mapState(["count"])

• 這是最簡單的寫法

mapState 函數怎麼跟局部計算屬性混合使用呢?

• mapState 函數返回的是一個對象。咱們如何將它與局部計算屬性混合使用呢？一般，咱們須要使用一個工具函數將多個對象合併爲一個，以使咱們能夠將最終對象傳給 computed 屬性。

computed: {
  localComputed () { /* ... */ },
  ...mapState({
    ...
  })
}

Mutations修改狀態

• 開頭的demo我已經使用了mutations修改狀態，接下來看看怎麼傳值

提交載荷（Payload）

• 你能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）
• 這只是一個最簡單的修改狀態的操做，一般咱們須要在修改狀態時傳值。好比上邊的例子，是咱們每次只加1，而如今咱們要經過所傳的值進行相加。其實咱們只須要在Mutations裏再加上一個參數，並在commit的時候傳遞就就能夠了。咱們來看具體代碼：
• 如今store.js文件裏給add方法加上一個參數n

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

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

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

• 這樣兩個簡單的修改咱們就完成了傳值，咱們能夠在瀏覽器中實驗一下了。
• 但在大多數狀況下，載荷應該是一個對象，這樣能夠包含多個字段而且記錄的 mutation 會更易讀：

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

模板獲取Mutations方法

• $store.commit( )這樣的方法很很差看，咱們但願跟調用模板裏的方法同樣調用
• 例如：@click=」add(10)」 就和沒引用vuex插件同樣。
• 要達到這種寫法，只須要簡單的兩部就能夠了：
  • 在模板count.vue裏用import 引入咱們的mapMutations
  • import { mapState,mapMutations } from 'vuex';
  • 在模板的<script>標籤裏添加methods屬性，並加入mapMutations

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

  • 經過上邊兩部，咱們已經能夠在模板中直接使用咱們的reduce或者add方法了，就像下面這樣。
  • <button @click="add(10)">-</button>
  • 還有mapMutations怎麼跟實例對象裏的methods對象混用，也是使用ES6的擴展操做符...

getters計算過濾操做

• getters從表面是得到的意思，能夠把他看做在獲取數據以前進行的一種再編輯,至關於對數據的一個過濾和加工。你能夠把它看做store.js的計算屬性。
• 好比咱們如今要對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屬性可用,因此咱們使用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

computed:{
            ...mapState(['count']),
            ...mapGetters(['count'])
        },

actions異步修改狀態

• Action 相似於 mutations，不一樣在於：
  • Action 提交的是 mutations，而不是直接變動狀態。
  • Action 能夠包含任意異步操做。

在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對象傳遞過來，這裏用到 ES2015 的 (參數解構 )[https://github.com/lukehoban/es6features#destructuring]來簡化代碼

模板中的使用

• 咱們須要在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引入纔可使用。

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>

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

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