简单和复杂的vuex配置

首先我们需要一个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
}