vuex和全局变量？localstorage？ |
您所在的位置：网站首页 › 监听vuex里面数据不生效 › vuex和全局变量？localstorage？ |
vuex和全局变量？localstorage？
|
Vuex 主要用于管理应用程序的状态( 依赖于响应式 )，而 LocalStorage 则主要用于持久化存储数据。vuex和localstorge一般也是结合一起使用的。 区别 数据持久化方式不同Vuex是一种内存中的状态管理方案，它的数据只在内存中存在，刷新页面后数据会重置 localStorage是一种本地存储方案，可以将数据持久化到本地浏览器的存储中，即使关闭了页面或者浏览器，数据也不会丢失 数据响应方式不同Vuex的数据是响应式的，当数据发生变化时，会自动触发更新操作，从而更新所有相关组件中的数据。 localStorage不具备响应式的特性，它的数据变化需要手动监听并进行更新操作. 存储内容不同localstorage存储的键值对的值应该是字符串形式的，而vuex存储的值可以是任何形式
监听 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 复制代码 基于reative的响应式LocalStorge实现监听数据变化重新设置本地存储 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 复制代码 那么问题来了鹅厂一面：用全局变量代替vuex可以吗？ 被面试官拷打了，追着问：按你之前来说，全局变量也可以设置成响应式，也可以持久化，那么还要vuex干嘛？ 我回答是怕污染变量造成命名冲突或者造成内存泄漏。。我知道自己回答错了哈哈，面试官看着我一直在笑，乐~~ （不过想想发现我回答的也没问题）
技术上是可以使用全局变量来代替 Vuex 实现数据共享，但是不推荐 使用全局变量虽然可以实现简单的数据共享，但是在大型应用中可能会导致数据不可控、逻辑不清晰等问题。 状态管理不便。在一个大型应用中，数据状态比较复杂，可能需要多个变量共同协作。使用全局变量来管理状态会使得状态的管理变得非常困难，不利于代码维护和可读性。 难以追踪状态变更。使用全局变量来管理状态时，当某个变量被修改时，我们很难追踪它是在哪个组件中被修改的，以及是由什么原因导致的。这会使得问题的排查变得非常困难。 数据共享不安全。全局变量会存在数据共享安全性问题，如果多个组件同时修改全局变量的同一个属性，就可能会导致数据出现冲突或者被意外修改。当然，我们也可以自己实现一个vuex，只需要用闭包存储并隐藏私有变量。我感觉我面试的时候说的还是有点对的！！ 用原生js实现一个简单的vuex // 创建 Store 对象 function createStore() { // 定义状态 let state = { count: 0 }; // 定义 mutations const mutations = { increment(state) { state.count++; }, decrement(state) { state.count--; } }; // 定义 actions const actions = { increment(context) { context.commit('increment'); }, decrement(context) { context.commit('decrement'); } }; // 返回 Store 对象 return { // 获取状态 getState() { return state; }, // 提交 mutations commit(type) { mutations[type](state); }, // 分发 actions dispatch(type) { const context = { commit: this.commit.bind(this) }; actions[type](context); } }; } // 创建 Store 实例 const store = createStore(); // 获取状态 console.log(store.getState()); // { count: 0 } // 提交 mutations store.commit('increment'); console.log(store.getState()); // { count: 1 } store.commit('decrement'); console.log(store.getState()); // { count: 0 } // 分发 actions store.dispatch('increment'); console.log(store.getState()); // { count: 1 } store.dispatch('decrement'); console.log(store.getState()); // { count: 0 } 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |