vuex和全局变量？localstorage？

Vuex 主要用于管理应用程序的状态( 依赖于响应式 )，而 LocalStorage 则主要用于持久化存储数据。vuex和localstorge一般也是结合一起使用的。

区别

1. 数据持久化方式不同

Vuex是一种内存中的状态管理方案，它的数据只在内存中存在，刷新页面后数据会重置

localStorage是一种本地存储方案，可以将数据持久化到本地浏览器的存储中，即使关闭了页面或者浏览器，数据也不会丢失

1. 数据响应方式不同

Vuex的数据是响应式的，当数据发生变化时，会自动触发更新操作，从而更新所有相关组件中的数据。

localStorage不具备响应式的特性，它的数据变化需要手动监听并进行更新操作.

1. 存储内容不同

localstorage存储的键值对的值应该是字符串形式的，而vuex存储的值可以是任何形式

结合使用

基于vuex的localstorge的响应式实现

监听 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 实现数据共享，但是不推荐

使用全局变量虽然可以实现简单的数据共享，但是在大型应用中可能会导致数据不可控、逻辑不清晰等问题。

1. 状态管理不便。在一个大型应用中，数据状态比较复杂，可能需要多个变量共同协作。使用全局变量来管理状态会使得状态的管理变得非常困难，不利于代码维护和可读性。
2. 难以追踪状态变更。使用全局变量来管理状态时，当某个变量被修改时，我们很难追踪它是在哪个组件中被修改的，以及是由什么原因导致的。这会使得问题的排查变得非常困难。
3. 数据共享不安全。全局变量会存在数据共享安全性问题，如果多个组件同时修改全局变量的同一个属性，就可能会导致数据出现冲突或者被意外修改。

当然，我们也可以自己实现一个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 }