1、vuex——數(shù)據(jù)倉(cāng)庫(kù)，管理的是狀態(tài)，是一個(gè)專(zhuān)門(mén)為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。
狀態(tài)：可以理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態(tài)。簡(jiǎn)單的說(shuō)就是data中需要共用的屬性。
比如：我們有幾個(gè)頁(yè)面要顯示用戶(hù)名稱(chēng)和用戶(hù)等級(jí)、或者顯示用戶(hù)的地理位置。如果我們不把這些屬性設(shè)置為狀態(tài)，那每個(gè)頁(yè)面遇到后，都會(huì)到服務(wù)器進(jìn)行查找計(jì)算，返回后再顯示。在中大型項(xiàng)目中會(huì)有很多共用的數(shù)據(jù)，所以就有了vuex。

成都創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、全椒網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開(kāi)發(fā)、成都商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為全椒等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

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

                

                        
{{msg}}
                        

                            +
                            -
                        
                        {{$store.state.count}}
                    
                    導(dǎo)出：export default({
                        data(){
                            return msg:'Vuex'
                        },
                        store //注冊(cè)
                    })
                    輸出count的值：{{$store.state.count}}

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

3、state
一種狀態(tài)對(duì)象，共享值
將狀態(tài)對(duì)象賦值給內(nèi)部對(duì)象，也就是把store.js中的值，賦值到模板中使用（和模板中獲得data的方法類(lèi)似了）
賦值方式有三種：
a.通過(guò)計(jì)算屬性

{{count}}

computed:{
count(){
return this.$store.state.count;
}
}
b.通過(guò)數(shù)組操作
首先引入mapState
import {mapState} from 'vuex';
然后計(jì)算屬性：
computed:mapState(['count']),
4、Mutations修改狀態(tài)(同步)
mutations存在的意義，就是寫(xiě)方法改變狀態(tài)store中的共享值，可傳遞參數(shù)，如下圖
count mutations = {
add(state,n){
state.count+=n;
}
}
使用： //使用方法是用$store.commit()，而不是直接add()，注意了?。?！
如果不想在html里面使用$store.commit()這么繁瑣，而是想直接用add()，和methods里面的方法一樣的用法，那么也可以：
首先引入mapMutations
import mapMutations from 'vuex'
然后定義methods
methods:mapMutations(['reduce'])，
即可在模板里面使用了：
5、getters計(jì)算過(guò)濾操作
getters：相當(dāng)于store倉(cāng)庫(kù)里的computed，狀態(tài)每操作一次，都會(huì)經(jīng)過(guò)getters過(guò)濾一次，類(lèi)似一個(gè)安檢門(mén)，然后返回給用戶(hù)
es6 ...操作符，用于將一個(gè)數(shù)組||類(lèi)數(shù)組||字符串轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列，展開(kāi)數(shù)組
這家伙是用來(lái)對(duì)數(shù)組進(jìn)行操作的，把數(shù)組里面的東西統(tǒng)統(tǒng)拿出來(lái)
功能是把數(shù)組或類(lèi)數(shù)組對(duì)象展開(kāi)成一系列用逗號(hào)隔開(kāi)的值

6、actions異步修改狀態(tài)(異步)

網(wǎng)頁(yè)標(biāo)題：vuex筆記
當(dāng)前鏈接：http://weahome.cn/article/iggejp.html