[TOC] ### 1. 項目結構  ### 2. app-config.js , user.js (token) ~~~ const appConfig = { // 命名空間 namespaced: true, state: { data: '' }, mutations: { SET_APP_CONFIG(state, data) { state.data = data } } } export default appConfig ~~~ ~~~ // user.js import { login, logout } from '@/api/login' import { setToken } from '@/utils/token' const user = { // 命名空間 namespaced: true, state: { token: '' }, mutations: { SET_TOKEN(state, token) { state.token = token } }, actions: { Login({ commit }, userInfo) { const loginName = userInfo.loginName.trim() const { password } = userInfo return new Promise((resolve, reject) => { login({ loginName, password }) .then(res => { console.log(res) const { token } = res setToken(token) commit('SET_TOKEN', token) resolve('success') }) .catch(err => { reject(err) }) }) }, Logout({ commit }) { return new Promise((resolve, reject) => { logout() .then(res => { console.log(res) const { token } = res setToken(token) commit('SET_TOKEN', token) resolve('success') }) .catch(err => { reject(err) }) }) } } } export default user ~~~ ~~~ // src/utils/token // cookie保存token (要裝js-cookie插件) import Cookies from 'js-cookie' const TokenKey = 'DME-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(token) { // 過期時間為1天 return Cookies.set(TokenKey, token, { expires: 1 }) } export function removeToken() { return Cookies.remove(TokenKey) } ~~~ ### 3. getters.js（注意后面state后面跟的是module中的導出名里data的數據） ~~~ const getters = { token: state => state.user.token, dataSource: state => state.dataSource.data, dataModel: state => state.dataModel.data, appConfig: state => state.appConfig.data } export default getters ~~~ ### 4. index.js ~~~ import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' import dataSource from './modules/data-source' import dataModel from './modules/data-model' import appConfig from './modules/app-config' import getters from './getters' Vue.use(Vuex) export default new Vuex.Store({ modules: { user, dataSource, dataModel, appConfig }, getters }) ~~~