1. 程式人生 > 實用技巧 >vue 中 vuex 的 module 模組使用

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