首先我们需要一个vuex数据持久化存储
共三部:下载、引入、使用
npm install --save vuex-persistedstate
然后再store/index.js文件中引入并使用
简单的vuex配置
//将数据都存到本地存储中
this.$store.dispatch('onMobile',填写数据) //触发actions异步
this.$store.commit('SET_Mobile',填写数据) //触发mutations方法
this.$store.state.mobile //获取vuex中的数据
import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate' //引入vuex数据持久化存储
Vue.use(Vuex)
export default new Vuex.Store({
state: {
token: localStorage.token || '',
mobile: localStorage.mobile ? JSON.parse(localStorage.mobile) : {},
homeData: localStorage.homeData ? JSON.parse(localStorage.homeData) : {},
},
mutations: {
SET_Mobile: (state, data) => {
localStorage.mobile = JSON.stringify(data)
state.mobile = data
},
SET_TOKEN: (state, data) => {
localStorage.token = data
state.token = data
},
SET_HOMEDATA: (state, data) => {
localStorage.homeData = JSON.stringify(data)
state.homeData = data
},
},
actions: {
onMobile({ commit }, data) {
commit('SET_Mobile', data)
},
onToken({ commit }, data) {
commit('SET_TOKEN', data)
},
onHomeData({ commit }, data) {
commit('SET_HOMEDATA', data)
},
},
modules: {
},
plugins: [persistedState()] //用vuex数据持久化存储
})
稍微复杂的vuex配置
配置目录
index.js文件中
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user
},
getters
})
export default store
getters.js文件中
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
userinfo: state => state.user.userinfo,
}
export default getters
app.js中
import Cookies from 'js-cookie'
import { router, resetRouter, asyncRouter, constantRoutes } from '../../router'
const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false
},
device: 'desktop',
getData: localStorage.getData ? JSON.parse(localStorage.getData) : '',
routerTree: [],
allRouter: []
}
const mutations = {
TOGGLE_SIDEBAR: state => {
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
},
SET_GETDATA: (state, data) => {
localStorage.getData = JSON.stringify(data)
state.getData = data
},
SET_ROUTERTREE(state, data) {
state.routerTree = data
},
SET_ALLROUTER(state, data) {
state.allRouter = data
},
}
const actions = {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
},
onGetData({ commit }, data) {
commit('SET_GETDATA', data)
},
setRouterTree({ commit }, data) {
localStorage.routerTree = JSON.stringify(data)
resetRouter()
let newAsyncRouter = asyncRouter(data)
let newSetRouter = constantRoutes(newAsyncRouter)
router.addRoutes(newSetRouter)
commit('SET_ROUTERTREE', data)
commit('SET_ALLROUTER', newSetRouter)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
settings.js文件中
import defaultSettings from '@/settings'
const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
const state = {
showSettings: showSettings,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
}
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
// eslint-disable-next-line no-prototype-builtins
if (state.hasOwnProperty(key)) {
state[key] = value
}
}
}
const actions = {
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
user.js文件中
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
userinfo: localStorage.userinfo ? JSON.parse(localStorage.userinfo) : {},
company: {}
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_USERINFO: (state, data) => {
localStorage.userinfo = JSON.stringify(data)
state.userinfo = data
},
SET_COMPANY: (state, data) => {
state.company = data
}
}
const actions = {
onSetCompany({ commit }, data) {
commit('SET_COMPANY', data)
},
// user login
login({ commit }, data) {
commit('SET_TOKEN', data.result_info.token)
commit('SET_USERINFO', data.result_info)
setToken(data.result_info.token)
},
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
commit('SET_NAME', 'name')
commit('SET_AVATAR', '')
resolve()
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')
resolve()
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
removeToken() // must remove token first
commit('RESET_STATE')
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}