vue-cli3使用vuex以及遇到的坑

在vue-cli3中使用vuex

一开始创建vue-cli3项目时没有store文件夹只有store.js，在这里我使用了模块化，结构如下图

 

store文件夹以user.js为例,如图

简单解释文件下名词代表的意思

1.state 变量定义的地方

2.mutations 同步方法，也是改变 state里面变量的唯一方法，默认参数 state就是 上面说的定义变量对象

3.actions 异步方法   默认参数 context 其中context.commit（）提交一个 mutation，

这个说明下 payload 是我在调用时传的外来参数 

这里需要注意的是

1. 直接导出是一个对象，

2.namespaced: true 使其成为带命名空间的模块

下面说说怎么使用这里面的方法和值，先看图

先解释下引用的意思

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('user')

简单的说现在我们取的值和方法就是 user模块里取的  ...mapState(['activeTabName'])es6的写法解构就好比把里面的值对应的赋值给vue data

  computed: {
    ...mapState(['activeTabName'])
  },

这个就是在调 user模块里面的值 ，调用多个时只要在数组中写入想要变量的名字就可以如

  computed: {
    ...mapState(['activeTabName', 'data1'])
  }

// 里面的值要先在user模块中定义的有

方法调试意思是一样的 好比vuex里面的方法绑定到methods里

  methods: {
    ...mapActions(['tabClick']),
  },

不知道大家注意到了么，我注释掉的watch方法；

如果按照上图引用element- ui 的tabs组件 v-model直接绑定 vuex state里面的值就会出现如下图的问题

Vuex: [Vue warn]: Computed property “activeTabName” was assigned to but it has no setter

这里tabs组件 v-model就不能直接绑定vuex里面的值，把vuex赋值给data里面的一个新值；或者有watch监听赋值变可以解决上面的问题

来张完整的图