vuex中mapState、mapGetters、mapActions、mapMutations的使用
第一步：建立store檔案，新增index.js檔案
第二步：安裝Vuex環境npm install vuex --save,引入以下內容
import Vue from'vue'import Vuex from'vuex'import axiosfrom'axios'
第三步：將Vuex作為一個外掛Vue.use(Vuex)
第四步：定義一個容器
let store=new Vuex.Store({
//引數與方法寫在這裡
//定義狀態
state:{//定義在這裡的資料是公用的
num:10,
navs:[]
},
getters:{
},
mutations:{
add(state,playload){
state.num+=playload.n;
},
desc(state,playload){
state.num-=playload.n
},
getNavs(state,playload){//改變state
state.navs=playload.res
}
},
actions:{
getNavs({commit}){//非同步請求 通過mock模擬資料進行後臺請求
console.log('store this')
console.log(this)
console.log(axios)
axios.get('http://easy-mock.com/mock/59bb998de0dc663341abbf37/http:/easy-mock.com/new/example/1/navs')
.then((response)=>{
commit('getNavs',{//觸發mutation
res:response.data.data
})
})
.catch((error)=>{
console.log(error)
})
}
}
})
第五步：將store釋放出去 export defaultstore
第六步：在main.js中引入store並使用。
import storefrom'./store'
new Vue({
el: '#app'
router,
store,
template: '<App/>',
components: { App }
})
第七步：在要操作的頁面中引入相應的擴充套件物件，編輯相關操作
import {mapState,mapGetters,mapActions,mapMutations}from'vuex'
export default {
computed:{
...mapState({//獲取資料
num:state=>state.num,
navs:state=>state.navs
}),
},
methods:{
//只用mapState 通過$store.commit觸發mutation
add(){this.$store.commit('add',{n:10})},
desc(){this.$store.commit('desc',{n:10})},
//使用mapAction mapMutation
...mapMutations({
add:'add',
}),
//getData:function () {this.$store.dispatch('getNavs')}
...mapActions({//觸發非同步操作
getData:'getNavs'
}),
},
created() {
//觸發一下函式使載入頁面時載入
this.getData()
}
}