vuex的使用毯侦，vuex輔助函數(shù)炎咖、muduld的詳解（文章下邊）

vuex的使用龄减，vuex輔助函數(shù)髓窜、muduld的詳解（文章下邊）

1)什么事Vuex

????Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式---所有頁面共享的變量

2）Vuex在什么情況下進(jìn)行使用

在項(xiàng)目過大的時(shí)候采取使用，項(xiàng)目量較小的時(shí)候是繁瑣冗余的
官網(wǎng)的說
如果您不打算開發(fā)大型單頁應(yīng)用欺殿，使用 Vuex 可能是繁瑣冗余的寄纵。確實(shí)是如此——如果您的應(yīng)用夠簡單，您最好不要使用 Vuex脖苏。

3）使用步驟

（以vue2.x腳手架為例）

3.1）下載安裝：npm install vuex

3.2）在src文件夾下--->創(chuàng)store--->index.js 這個(gè)文件就是vuex狀態(tài)管理

在文件中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const Store =new Vuex.Store({
state:{},//數(shù)據(jù)存儲
mutations:{},//更改數(shù)據(jù)
actions:{}//觸發(fā)程拭，調(diào)用更改數(shù)據(jù)
getters:{//計(jì)算（類似computed）可以說是一個(gè)橋梁，不用直接訪問state
getState(state){returen state.msg}//這樣訪問這個(gè)就相當(dāng)于訪問state中的msg
}棍潘，
muduld:{newmuduld//這里是模塊名字}//模塊恃鞋，每個(gè)模塊都擁有這五種方法和屬性
}）
export default Store

在main.js引入

import store from './store/index'//index可省略
在vue實(shí)例中進(jìn)行注冊new Vue({//這里 store})

在頁.vue組件中使用

獲取樣式：this.$store.state.count

methods中用在
this.$store.commit("cNum")

//cNum----->mutations定義的函數(shù)---》修改state值 cNum（state）{state.num++} 同步

this.$store.dispatch("acNum")

//acNum--->actions定義的函數(shù)---->函數(shù)在觸發(fā)-》 mutations中定義函數(shù) ---》修改state值異步（同步不可以操作異步，異步可以操作同步的）

getters在頁面.vue的computed計(jì)算這里用
computed：{getMsg(){renturn this.$store.getters.getState}}
//這樣調(diào)用getters中定義的定義

Vuex輔助函數(shù)---》

作用亦歉，就是使用更加的簡潔（少敲代碼恤浪，少掉點(diǎn)頭發(fā)），使得在使用的.vue頁面中訪問storevuex頁面更加的方便簡介一點(diǎn)
在那個(gè).vue文件用肴楷，就在那里引用所要使用的輔助函數(shù)

使用：在.vue

在沒有引入vuex輔助函數(shù)的時(shí)候我們使用是
this.$store.commit("cNum")---》同步

this.$store.dispatch("acNum")異步

this.$store.state.count---》獲取變量

this.$store.getters.getState---》計(jì)算變量
在引入vuex函數(shù)后在訪問就變成
引用：import {mapGetters,mapMutations,mapState,mapAction} from 'vuex'
擴(kuò)展：
其中mapMutations和mapAction
在methods進(jìn)行擴(kuò)展出來...mapAction(["one","two"]/{"one":"o1","two":"t2"}) 水由，
mapGetters和mapState
在computed中進(jìn)行擴(kuò)展...mapState(['num']) ...mapGetters(['userInfo'])
調(diào)用使用：
this.two()--->mapMutations和mapAction
this.num--->mapGetters和mapState

以...mapGetters(["one","two"]/{"one":"o1","two":"t2"}) 為例詳解：

[]/{}中寫的是在store中定義好的方法名，所以調(diào)用的時(shí)候就不再使用this.$store.getters.one而是直接this.one就可以訪問到數(shù)值了
[]和{} 數(shù)組和對象可以赛蔫，但是數(shù)組要名字一樣砂客，對象可以改名，可以不改名字

Vuex模塊化（優(yōu)化）
將實(shí)例里的參數(shù)呵恢，獨(dú)立出一個(gè)模塊鞠值，然后在引用的index.js
state,
mutations,
actions,
getters, 將以上四個(gè)獨(dú)立模塊，
state.js---》let state ={}; export.default state //其余三個(gè)相同方法（各個(gè)模塊中若是用到彼此渗钉，在各個(gè)頁面中可相互引用）
在store文件夾---》index.js 引入這四個(gè)模塊

axios調(diào)取接口存到state數(shù)據(jù)里
在actions調(diào)用---》在mutations存值----》存到state
注意：各模塊中使用的別的模塊的內(nèi)容彤恶，要在模塊中進(jìn)行引用