vue 中 vuex 的 module 模块使用

1.vuex 包含四个模块，state、mutation、actions、以及moudle，前面三个用的还是比较多得， 但是最后这个moudle用得时候就遇到了问题。

问题描述：当分模块设置vuex 中得数据时，取不到相应模块里面得数据

原因： 路径不对，当我们用vuex 某一模块的的值时，路径需要加上该文件的名字，如下：

 

 

 2、继续总结一下，vuex 中其他某块的使用方法：（上图中的useMsg.js）

import Cookies from 'js-cookie'
const state = {
  // 存储用户信息
  uniPcUser: Cookies.get('uniPcUser') ? Cookies.get('uniPcUser') : '',
  companyName: Cookies.get('companyName') ? Cookies.get('companyName') : '',
  companyLogo: Cookies.get('companyLogo') ? Cookies.get('companyLogo') : '',
}
const mutations = {
  storageUser: (state, msg) => {
    state.uniPcUser = msg.uniPcUser
    Cookies.set('uniPcUser', msg.uniPcUser, { expires: 7 })
  },
  storageCompanyName: (state, msg) => {
    state.companyName = msg.companyName
    Cookies.set('companyName', msg.companyName, { expires: 7 })
  },
  storageCompanyLogo: (state, msg) => {
    state.companyLogo = msg.companyLogo
    Cookies.set('companyLogo', msg.companyLogo, { expires: 7 })
  },
}
const actions = {
  storageActionUser(context, info) {
    context.commit('storageUser', info)
  },
  actionCompany({ commit }, info) {
    commit('storageCompanyName', info)
  },
  actionCompanyLogo({ commit }, info) {
    commit('storageCompanyLogo', info)
  },
}
export default {
  namespaced: true, //命名空间 也叫名称空间、名字空间
  state,
  mutations,
  actions
}

　　3、这是在模块中使用，那么需要在 store 文件夹下面的index.js 文件中引用一下我们写的文件

import Vue from 'vue'
import Vuex from 'vuex'
import Cookies from 'js-cookie'
import userMsg from './modules/userMsg'   //相应的文件
import checkHeader from './modules/header'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 存储token
    uniPcToken: Cookies.get('uniPcToken') ? Cookies.get('uniPcToken') : ''
  },
  mutations: {
    // 修改token，并将token存入Cookies
    storageToken(state, user) {
      state.uniPcToken = user.uniPcToken
      Cookies.set('uniPcToken', user.uniPcToken, { expires: 7 })
    },
    removeCookie(state, uuu) {
      Cookies.remove('uniPcToken', uuu.uniPcToken)
      console.log('删除成功')
    }
  },
  actions: {
    removeCookieAction(context, qwe) {
      context.commit('removeCookie', qwe)
    }
  },
  modules: {
    userMsg,     // 在文件中引用模块
    checkHeader
  }
})
export default store

　　4、那么当我们用 vuex 的时候怎么用呢？这里推荐使用  mapActions  mapMutation  具体的使用方法：

import { mapMutations, mapActions } from 'vuex'
  methods: {
    ...mapMutations(['storageToken']),
    ...mapActions({     //这里用模块时一定要加入文件的名字 如 userMsg
      'storageActionUser': 'userMsg/storageActionUser',  
      'actionCompany': 'userMsg/actionCompany',
      'actionCompanyLogo': 'userMsg/actionCompanyLogo',
      'actionUid': 'userMsg/actionUid',
      'actionuniPc_agency_id': 'userMsg/actionuniPc_agency_id',
      'actionUniPc_avatar': 'userMsg/actionUniPc_avatar',
      'actionuniPc_isHeader': 'userMsg/actionuniPc_isHeader',
      'actionuniPc_name': 'userMsg/actionuniPc_name'
    })
}

使用时：
// 存起用户信息
this.storageToken({ uniPcToken: data.token })