vuex简化模板

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

使用vuex时，把state.js、getter.js、actions.js和mutations.js拆分成单个文件引入index.js，然后使用

一、建立store文件

在store文件下新建state.js、getter.js、actions.js、mutations.js、index.js等文件

二、在index.js中引入state.js、getter.js、actions.js、mutations.js

1.引入

代码如下（示例）：

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'


Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
  modules: {
  }
})

2.state.js

代码如下（示例）：

const state = {
  list:[]
}
export default state

3.action.js

代码如下（示例）：异步

const actions = {
  init({commit},res){
    commit(types.name,res)
  },
}

export default actions

4.getter.js

代码如下（示例）：用于写计算属性的方法

/*编写getters的变量映射
 * getters文件是对象数据的映射，是一些函数，通关getters来获取state数据不能直接访问，使用箭头函数更加简洁
 * 对应const singer变量
 * ...mapGetters([
 *      'singer'
 *  ])
 * */
// export const singer = state => state.singer

5.mutations.js

代码如下（示例）：同步

const matutaions = {
    name(state,params){
      //state  是需要修改的数据
      //params是传来的值，可以是字符串也可以是对象
    },
    
}
export default matutaions

使用方法

在vue文件可以直接**this.$store.state.数据名称** 来获取数据 在vue文件可以直接**this.$store.dispatch("方法名称",参数)**调用actions的方法，用于异步 在vue文件可以直接**this.$store.commit("方法名称"，参数)**调用mutations的方法，用于同步

总结

当引入action是，报错unknown action type: init是应为文件没有正确引入，获取不到actions里的方法，需重新引入。