vuex中刷新实现保存状态

考拉菜鸟

于 2021-03-30 11:33:36 发布

阅读量235

点赞数

分类专栏： vuex 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/chunmeizhang_88/article/details/115321410

版权

vuex 专栏收录该内容

1 篇文章

订阅专栏

这个博客介绍了如何在Vue应用中使用Vuex进行状态管理，并结合插件实现状态的持久化存储。通过引入`state`、`getters`、`mutations`、`actions`以及模块化的`products`和`cart`，博主展示了Vuex的基本架构。同时，他还使用了`createLogger`用于调试，以及`createPersistedState`插件在刷新页面时保持状态。此外，还自定义了一个插件来监听所有mutation。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import {myPlugin} from './plugins';
// vuex自带日志插件
import createLogger from 'vuex/dist/logger';
// 刷新时可以保存vuex状态的插件，通过localStorage实现
import createPersistedState from "vuex-persistedstate"; 

import products from './modules/products'
import cart from './modules/cart'

Vue.use(Vuex)

//不要在发布环境下启用严格模式！
const debug =process.env.NODE_ENV !== 'production';
const store = new Vuex.Store({
  strict: debug,
  state,
  getters,
  mutations,
  actions,
  modules: {
    products,
    cart
  },
  plugins: [createLogger(), /*myPlugin*/ /*createPersistedState()*/]
})

// 2.手写
window.addEventListener('beforeunload', () => {
  localStorage.setItem('stateInfo', JSON.stringify(store.state))
})

if(localStorage.getItem('stateInfo')) {
  store.replaceState(
    Object.assign(
      {},
      store.state,
      JSON.parse(localStorage.getItem('stateInfo'))
    )
  )
}
localStorage.removeItem('stateInfo')

export default store;

//plugins.js
export const myPlugin = store => {
  store.subscribe((mutation, state)=>{
    console.log(mutation);
  })
}