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

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

2、vuex小demo之顯示count并且可以進行加減操作
a.首先npm install vuex --save 本地安裝vuex，一定要加上 –save，因為這個包我們在生產(chǎn)環(huán)境中是要使用的
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ǎo)出到外部使用
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>
                    導(dǎo)出：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的數(shù)值的方法，必須寫在mutations里。

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

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

網(wǎng)頁題目：vuex筆記
網(wǎng)頁網(wǎng)址：http://aaarwkj.com/article28/iggejp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、、域名注冊、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)