vuex一般用于中大型项目，其内容有
state 存放状态mutations state成员操作(处理数据，更改保存到state中。用法this.$store.commit )getters 加工state成员给外界actions 异步操作（一般用于处理请求逻辑之后将数据给mutations，用法this.$store.dispatch )modules 模块化状态管理modules 的每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
简单基础使用就不说了，说重点。
在项目中一般是以模块化管理为主。为了方便每个模块的管理和维护大多使用modules模块化状态管理。
上目录
这里面的actions.js和mutation是公共的方法（我自己的习惯）
getters.js和store.js是让外界得到state,公共数据。
index.js是将所有模块集合到一起。然后挂载到main.js上。
//index.js内容 import Vue from 'vue' import vuex from 'vuex' import getters from './getters' import actions from './modules/actions' import mutations from './modules/mutation' import user from './modules/user.js' import user2 from './modules/user2' import state from './store' Vue.use(vuex) export default new vuex.Store({ getters, state, //模块vuex modules: { //公共vuex2个模块 actions, mutations, //各个单独模块使用的vuex user, user2 } })使用modules后外面不要再加actions和mutations(会报错）
上其中一个单独模块的代码
//这里是user.js的代码 //某个模块专门使用的vuex。调用时加上该模块名字。如this.$store.commit('user/方法名') const state = { userName:'' } const getters = { userName:(state) => state.userName } const actions = { add_name({commit},name){ commit('ADD_NAME',name); console.log('这里是user1的actions',name) }, } const mutations = { ADD_NAME(state,name){ state.userName=name; console.log('这里是user1',name) return true; } } export default { namespaced: true, //记住一定要加这个 state, getters, actions, mutations }namespaced是告诉vuex给它搞个看见出来。默认false. 开启后就是提示打开了命名空间。这样2个模块有同样的方法也不会报错。
当你要调用某个模块的方法时记得写法是
this.$store.commit('模块名/方法名')
this.$store.dispatch('模块名/方法名')
一切弄完之后记得挂载到main.js上
import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' import store from './store/index' Vue.config.productionTip = false Vue.use(Vuex) /* eslint-disable no-new */ new Vue({ el: '#app', router, store, //这就是挂载了 components: { App }, template: '<App/>' })有时候报错说未找到该模块有这个方法
报错信息为：
[vuex] unknown action type: user/add_name
你可以删除命名空间试试。
下面放其他js的代码
//actions.js代码 //公共actions异步方法 export default {//在action中可以进行异步操作。 namespaced: true, actions:{ add_book({commit},book){ commit('ADD_BOOK',book); }, delete_book({commit},book){ commit('DELETE_BOOK',id); } } } //mutations.js代码 //公共mutation方法 export default {//这里要注意不要在mutations里面进行异步操作 namespaced: true, mutations:{ ADD_BOOK(state,book){ state.bookList.push(book); return true; }, DELETE_BOOK(state,id){ } } }我觉得这样写便于管理，有的人喜欢给mutations加一个mutations_type的文件。其实就是将他们的方法名都注册一下。我不喜欢这样。
有所帮助麻烦点个赞谢谢。
