vuex筆記

1、vuex——數據倉庫，管理的是狀態，是一個專門為vue.js設計的集中式狀態管理架構。
狀態：可以理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態。簡單的說就是data中需要共用的屬性。
比如：我們有幾個頁面要顯示用戶名稱和用戶等級、或者顯示用戶的地理位置。如果我們不把這些屬性設置為狀態，那每個頁面遇到后，都會到服務器進行查找計算，返回后再顯示。在中大型項目中會有很多共用的數據，所以就有了vuex。

2、vuex小demo之顯示count并且可以進行加減操作
a.首先npm install vuex --save 本地安裝vuex，一定要加上 –save，因為這個包我們在生產環境中是要使用的
b.新建vuex文件夾，里面新建store.js，并且引入vue和vuex
import Vue from 'Vue';
import Vuex from 'Vuex';
Vue.use(Vuex); //注冊使用
c.store.js：新建常量對象count，并且通過
export default new Vuex.Store({
state,
mutations
})導出到外部使用
d.在components文件夾下新建vue模板，在模板中引入store.js文件，import store from '@/Vuex/store'

                <div>
                        <h3>{{msg}}</h3>
                        <p>
                            <button @click="$store.commit('add')">+</button>
                            <button @click="$store.commit('reduce')">-</button>
                        </p>
                        {{$store.state.count}}
                    </div>
                    導出：export default({
                        data(){
                            return msg:'Vuex'
                        },
                        store //注冊
                    })
                    輸出count的值：{{$store.state.count}}

        e.在store.js文件中加入兩個改變state的方法
                count mutations = {
                    add(state){
                        state.count++;
                    },
                    reduce(state){
                        state.count--;
                    }
                }
        這里的mutations是固定的寫法，意思是改變的，我們要改變state的數值的方法，必須寫在mutations里。

3、state
一種狀態對象，共享值
將狀態對象賦值給內部對象，也就是把store.js中的值，賦值到模板中使用（和模板中獲得data的方法類似了）
賦值方式有三種：
a.通過計算屬性
<h4>{{count}}</h4>
computed:{
count(){
return this.$store.state.count;
}
}
b.通過數組操作
首先引入mapState
import {mapState} from 'vuex';
然后計算屬性：
computed:mapState(['count']),
4、Mutations修改狀態(同步)
mutations存在的意義，就是寫方法改變狀態store中的共享值，可傳遞參數，如下圖
count mutations = {
add(state,n){
state.count+=n;
}
}
使用：<button @click="$store.commit('add',10)"></button> //使用方法是用$store.commit()，而不是直接add()，注意了！！！
如果不想在html里面使用$store.commit()這么繁瑣，而是想直接用add()，和methods里面的方法一樣的用法，那么也可以：
首先引入mapMutations
import mapMutations from 'vuex'
然后定義methods
methods:mapMutations(['reduce'])，
即可在模板里面使用了： <button @click="reduce()"></button>
5、getters計算過濾操作
getters：相當于store倉庫里的computed，狀態每操作一次，都會經過getters過濾一次，類似一個安檢門，然后返回給用戶
es6 ...操作符，用于將一個數組||類數組||字符串轉為用逗號分隔的參數序列，展開數組
這家伙是用來對數組進行操作的，把數組里面的東西統統拿出來
功能是把數組或類數組對象展開成一系列用逗號隔開的值

6、actions異步修改狀態(異步)