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 })