...mapState,...mapMutations使用

最新推荐文章于 2024-08-14 22:59:24 发布

cygdxcw

最新推荐文章于 2024-08-14 22:59:24 发布

阅读量5.8k

点赞数 2

分类专栏： vuex 文章标签： vuex扩展运算符 ...mapState ...mapMutations

本文链接：https://blog.csdn.net/cygdxcw/article/details/100520793

版权

vuex 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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: '<App/>',
  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");
    }
  },