vuex模块化管理在正式项目中的运用及其注意事项

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的文件。其实就是将他们的方法名都注册一下。我不喜欢这样。

 

 

有所帮助麻烦点个赞谢谢。