---

一、vue2

1. 手動存儲到localStorage

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)// 本地存儲-修改
const storageSet = (key, value) => {localStorage.setItem(key, JSON.stringify(value))
}// 本地存儲-獲取
const storageGet = (key) => {return JSON.parse(localStorage.getItem(key))
}export default new Vuex.Store({// 數據源 使用：this.$store.state.xxxstate: {user: {} // 用戶信息},// 派生數據 使用：this.$store.getters.xxxgetters: {// 獲取當前-用戶對象GET_USER(state) {state.user = storageGet('STORE_USER') || {}return state.user}},// 更改數據-同步 使用：this.$store.commit('xxx', data)mutations: {// 保存當前-用戶對象SET_USER(state, data) {state.user = datastorageSet('STORE_USER', data)}},// mutations裝飾器-異步actions: { }
})

---

2. 使用持久化存儲插件

store/index.js

提示：vuex持久化存儲

import Vue from 'vue'
import Vuex from 'vuex'// Vuex持久化存儲
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({storage: window.localStorage
})import otherData from "./modules/otherData.js"Vue.use(Vuex)const state = {}const getters = {}const mutations = {}const actions = {}export default new Vuex.Store({state,getters,mutations,actions,modules: {// 模塊命名，要在 js文件 聲明namespaced: true才有用otherData,},plugins: [vuexLocal.plugin]
})

store/modules/otherData.js

// state
let state = {// 字典數據dictionaryData: [],
}// getters
let getters = {// 字典數據get_dictionaryData(state) {return state.dictionaryData},
}// mutations，以isShow屬性為例
let mutations = {// 字典數據change_dictionaryData(state, data) {state.dictionaryData = data},
}// ctions
let actions = {// 這里有兩種寫法，本質上一樣// 寫法1，無參asChangeShow(context) {context.commit('changeShow')},// 寫法2，無參// asChangeShow({ commit }) {//     commit('changeShow')// }//有參asChangeName({ commit }, data) {commit('changeName', data)}
}
export default {namespaced: true, // 是否開啟模塊state,getters,mutations,actions
}

保存到localStorage

App.vue

created() {// 在頁面加載時讀取localStorage里的狀態信息if (localStorage.getItem("store")) {this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("store"))))}// 在頁面刷新時將vuex里的信息保存到localStorage里window.addEventListener("beforeunload", () => {localStorage.setItem("store", JSON.stringify(this.$store.state))})
}

---

二、vue3

1. index.ts

// store/index.js  
import { createStore } from 'vuex'; // 從 localStorage 中獲取初始狀態 
const savedState = localStorage.getItem('vuexState');  
const initialState = savedState ? JSON.parse(savedState)  : {}; import globalData from "./modules/globalData"const store = createStore({ state() { return initialState; }, mutations: { }, actions: { }, getters: { },modules: {globalData,}
}); // 監聽狀態變化，將狀態保存到 localStorage 
store.subscribe((mutation,  state) => { localStorage.setItem('vuexState',  JSON.stringify(state));  
}); export default store; 

2. store/modules/globalData.ts

const state:any = {menuList: []
}
const mutations:any = {change_menuList(state: any, data: any){state.menuList = data}menuList: []
}
export default {namespace: "globalData",state,mutations,
}

使用

<script setup> 
import { useStore } from 'vuex'; const store = useStore(); store.state.globalData.menuList // 獲取
store.commit("change_menuList", menu) //更新</script>

3. 在組件中使用App.vue

<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> 
</template> <script setup> 
import { useStore } from 'vuex'; const store = useStore(); const count = store.getters.getCount;  const increment = () => { store.dispatch('increment');  
}; const decrement = () => { store.dispatch('decrement');  
}; 
</script>