1)什么事Vuex
????Vuex是一個專為Vue.js應用程序開發的狀態管理模式---所有頁面共享的變量
2)Vuex在什么情況下進行使用
在項目過大的時候采取使用,項目量較小的時候是繁瑣冗余的
官網的說
如果您不打算開發大型單頁應用,使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單,您最好不要使用 Vuex。
3)使用步驟
(以vue2.x腳手架為例)
3.1)下載安裝:npm install vuex
3.2)在src文件夾下--->創store--->index.js 這個文件就是vuex狀態管理
在文件中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const Store =new Vuex.Store({
state:{},//數據存儲
mutations:{},//更改數據
actions:{}//觸發,調用更改數據
getters:{//計算(類似computed)可以說是一個橋梁,不用直接訪問state
getState(state){returen state.msg}//這樣訪問這個就相當于訪問state中的msg
},
muduld:{newmuduld//這里是模塊名字}//模塊,每個模塊都擁有這五種方法和屬性
})
export default Store
在main.js引入
import store from './store/index'//index可省略
在vue實例中進行注冊new Vue({//這里 store})
在頁.vue組件中使用
獲取樣式:this.$store.state.count
methods中用在
this.$store.commit("cNum")
//cNum----->mutations定義的函數---》修改state值 cNum(state){state.num++} 同步
this.$store.dispatch("acNum")
//acNum--->actions定義的函數---->函數在觸發-》 mutations中定義函數 ---》修改state值 異步(同步不可以操作異步,異步可以操作同步的)
getters在頁面.vue的computed計算這里用
computed:{getMsg(){renturn this.$store.getters.getState}}
//這樣調用getters中定義的定義
Vuex輔助函數---》
作用,就是使用更加的簡潔(少敲代碼,少掉點頭發),使得在使用的.vue頁面中訪問storevuex頁面更加的方便簡介一點
在那個.vue文件用,就在那里引用所要使用的 輔助函數
使用:在.vue
在沒有引入vuex輔助函數的時候我們使用是
this.$store.commit("cNum")---》同步
this.$store.dispatch("acNum")異步
this.$store.state.count---》獲取變量
this.$store.getters.getState---》計算變量
在引入vuex函數后在訪問就變成
引用:import {mapGetters,mapMutations,mapState,mapAction} from 'vuex'
擴展:
其中mapMutations和mapAction
在methods進行擴展出來...mapAction(["one","two"]/{"one":"o1","two":"t2"}) ,
mapGetters和mapState
在computed中進行擴展...mapState(['num']) ...mapGetters(['userInfo'])
調用使用:
this.two()--->mapMutations和mapAction
this.num--->mapGetters和mapState
以...mapGetters(["one","two"]/{"one":"o1","two":"t2"}) 為例詳解:
[]/{}中寫的是在store中定義好的方法名,所以調用的時候就不再使用this.$store.getters.one而是直接this.one就可以訪問到數值了
[]和{} 數組和對象可以,但是數組要 名字一樣,對象可以改名,可以不改名字
Vuex模塊化(優化)
將實例里的參數,獨立出一個模塊,然后在引用的index.js
state,
mutations,
actions,
getters, 將以上四個獨立模塊,
state.js---》let state ={}; export.default state //其余三個相同方法 (各個模塊中若是用到彼此,在各個頁面中可相互引用)
在store文件夾---》index.js 引入 這四個模塊
axios調取接口存到state數據里
在actions調用---》在mutations存值----》存到state
注意:各模塊中使用的別的模塊的內容,要在模塊中進行引用
muduld詳解和使用
muduld模塊,每個模塊都擁有這五種方法和屬性state,mutations,actions,getters,muduld
上述中我們只是說有一倉庫的時候的使用,
muduld是在大倉庫中放入的小倉庫
在主index文件中
創建引入的這user/order.js中的內容---每個模塊可有可沒有,但都支持
在小倉庫user/order創建命名空間---使小倉庫獨立
在頁面.vue中的使用
然后使用的方式就和上述中的使用方式一樣,訪問每個小倉庫中的那樣使用
調用使用:
this.two()--->mapMutations和mapAction
this.num--->mapGetters和mapState
不使用命名空間的使用------稍微帶一嘴