Vuex使用 2

*state訪問狀態對象

訪問狀態對象就是SPA（單頁應用程序）中的共享值。狀態對象賦值給內部對象，也就是把stroe.js中的值，賦值給模板裏data中的值

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

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

	注意的是return this.$store.state.count這一句，一定要寫this，
	要不會找不到$store的。這種寫法很好理解，但是寫起來是比較麻煩的

通過mapState的對象來賦值

首先要用import引入mapState。

import {mapState} from 'vuex';
然後還在computed計算屬性裏寫如下代碼：

computed:mapState({
        count:state=>state.count
 })
這裏使用ES6的箭頭函數來給count賦值。

通過mapState的數組來賦值

 computed:mapState(["count"])
這個算是最簡單的寫法了，在實際項目開發當中也經常這樣使用。

、
、
、
、
、
、

*Mutations修改狀態

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

getters基本用法：

比如我們現在要對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屬性可用，所以要對上節課寫的computed屬性進行一個改造。改造時使用ES6中的展開運算符”…”。

/*首先用import引入我們的`mapGetters*/
import { mapState,mapMutations,mapGetters } from 'vuex';
computed:{
    ...mapState(["count"]),
	...mapGetters(["count"])
},