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()
      }
    }

转自博客：https://blog.csdn.net/Doulvme/article/details/78221873?locationNum=7&fps=1