Vuex 主要用于管理应用程序的状态( 依赖于响应式 )，而 LocalStorage 则主要用于持久化存储数据。vuex和localstorge一般也是结合一起使用的。
1.两者的区别
Vuex是一种内存中的状态管理方案，它的数据只在内存中存在，刷新页面后数据会重置localStorage是一种本地存储方案，可以将数据持久化到本地浏览器的存储中，即使关闭了页面或者浏览器，数据也不会丢
2.数据响应方式不同
Vuex的数据是响应式的，当数据发生变化时，会自动触发更新操作，从而更新所有相关组件中的数据。localStorage不具备响应式的特性，它的数据变化需要手动监听并进行更新操作.
3.存储方式不同
localstorage存储的键值对的值应该是字符串形式的，而vuex存储的值可以是任何形式
4.结合使用
//监听 Vuex 的 state 变化并进行持久化存储
import Vuex from 'vuex'
const store = new Vuex.Store({
state: { }, // 状态
mutations: { }, // 修改状态的方法
actions: { }, // 异步操作的方法
getters: { } // 计算属性
}) // 监听 Vuex 的 state 变化，如果有变化就保存到 localStorage 中
store.subscribe((mutation, state) => {
localStorage.setItem('vuex-state', JSON.stringify(state))
})
// 如果 localStorage 中有之前保存的 state，就将其替换当前的 state
const savedState = JSON.parse(localStorage.getItem('vuex-state')) if (savedState) { store.replaceState(savedState) } export default store// 监听数据变化重新设置本地存储
import { reactive, watch } from 'vue'
// 定义响应式的localStorage对象 const localState = reactive({ data: JSON.parse(localStorage.getItem('data') || '{}') }) // 监听localState对象中data属性的变化 watch(localState, (newVal) => { localStorage.setItem('data', JSON.stringify(newVal.data)) },
//开启深度监听
deep: true ， }) export default localState
