...mapState,...mapMutations使用

1.新建store仓库。
这里我是把store单独抽离出来,放在store.js里:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
    state:{
      car:'ha'
    },
    mutations:{
      addToCar(state,info){
        state.car = info
      }
    },  
    getters:{
  
    }
  })
  export default store

2.main.js中:

import store from './store'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '',
  store
})

3.现在就可以开始使用了:
/1mapState使用:

	import {mapState} from 'vuex'
	  computed:{
    	...mapState({
      // car:'car',//最简单的写法
      car:state=>state.car//也可以这样写
   				 })
  	},
  	//如果要监听car的数据改变,可以结合watch来使用。methods方法中也可以通过this.car访问到。
/2mapMutations使用:
import {mapMutations} from "vuex";
  methods: {
    ...mapMutations(["addToCar"]),//映射成this.addToCar
    cz() {
      this.addToCar("change");
    }
  },

你可能感兴趣的