对vuex的理解

Vuex 是专为 Vue.js 应用程序设计的状态管理库。在 Vue.js 中，组件之间的状态共享和管理可能变得复杂，而 Vuex 提供了一种集中式的状态管理机制，有助于更有效地管理和跟踪应用程序的状态。 简单来说就是：应用遇到多个组件共享状态时，使用vuex。

vuex关键概念：

1. State： vuex的基本数据，用来存储变量
2. Getters： 从基本数据(state)派生的数据，相当于state的计算属性
3. Mutations： 提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. Actions： 和mutation的功能大致相同，不同之处在于 1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. Modules： 模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清

vuex的例子

const state = {
  count: 0,
  history: []
}
const mutations = {
  increment(state) {
    state.count++
    state.history.push(`增加。现在计数为 ${state.count}`)
  },
  decrement(state) {
    state.count--
    state.history.push(`减少。现在计数为 ${state.count}`)
  }
}
const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  },
  decrementAsync({ commit }) {
    setTimeout(() => {
      commit('decrement')
    }, 1000)
  }
}
const getters = {
  doubleCount: state => state.count * 2,
  getHistory: state => state.history
}
const moduleA = { /* ... */ }
const moduleB = { /* ... */ }

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    moduleA,
    moduleB
  }
})

在这段代码中，state 对象包含了应用程序的状态数据，例如 count 表示计数器的值，history 用于记录操作历史。 mutations 包含了修改状态的方法，比如 increment 和 decrement 用于增加和减少计数值，同时更新历史记录。actions 包含了异步操作，例如 incrementAsync 和 decrementAsync 使用 commit 来触发相应的 mutations，实现延迟增加和减少计数。 getters 允许从状态中派生出新的值，比如 doubleCount 计算当前计数的两倍，getHistory 获取历史记录。 modules 允许将 store 分成模块，这里有两个模块 moduleA 和 moduleB，每个模块有自己的 state、mutations、getters。

这里帖一张找来的流程图：

vuex的整体流程是：

1. 在组件内部，通过dispatch来分发action。
2. 再通过action来第调用mutation
3. 进而触发mutation内部的commit来修改state
4. 最后state改变，导致页面重新render。

actions 主要用于处理异步任务，actions 通过 commit 方法来触发对应的 mutations，从而修改状态。这确保了状态变更是同步的，即使是在异步操作中。

页面刷新后vuex的state数据丢失怎么解决

当页面刷新后，Vuex 的状态数据会被重置，因为 Vuex 的状态是保存在内存中的，而不是持久性的存储。为了解决这个问题，可以考虑以下几种方法：

使用持久性存储： 将 Vuex 的状态保存在浏览器的持久性存储中，例如使用 localStorage 或 sessionStorage。这样，当页面刷新时，你可以从存储中恢复状态。

使用插件