vue 中 vuex 的 module 模組使用
阿新 • • 發佈:2020-11-27
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 })