vuex总结

简述vuex中的常用属性及作用

Vuex 是 Vue.js 的状态管理库，它提供了一种集中式存储管理应用的数据的方式。在 Vuex 中，有几个常用的属性及其作用如下：

1. state：用于存储应用的状态数据。State 应该是唯一源，即单一数据源，所有组件共享这些状态数据。通过访问 this.$store.state 或者在组件中使用辅助函数 mapState 来获取和修改 state 中的数据。

2. getters：用于派生出一些衍生的状态数据，相当于 Vue 组件中的计算属性。可以对 state 中的数据进行一些操作或处理，返回一个新的值。通过访问 this.$store.getters 或者在组件中使用辅助函数 mapGetters 来获取 getter 中的数据。

3. mutations：用于修改 state 中的数据，只能执行同步操作。每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler）。通过提交（commit）一个 mutation 来修改 state，例如通过 this.$store.commit('mutationType') 执行 mutation。

4. actions：与 mutations 类似，用于提交 mutation 来修改 state 中的数据。不同的是，actions 可以执行异步操作。每个 action 也有一个字符串类型的事件类型（type）和一个回调函数（handler）。通过分发（dispatch）一个 action 来触发异步操作，例如通过 this.$store.dispatch('actionType') 执行 action。

5. modules：用于将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。模块内部的 state、getters、mutations 和 actions 的访问方式与根级别的一致。

这些属性都是 Vuex 中常用的属性，用于在全局共享状态、管理数据和实现组件间通信。通过合理地使用这些属性，我们可以更好地组织和管理应用程序的状态。

Vuex中改变store状态值的方法是什么？为什么？

在 Vuex 中，改变 store 状态值的方法是通过提交 mutations 来实现的。mutations 是专门用于修改 state 的方法。

为什么使用 mutations 来改变状态值呢？这是因为 Vuex 的核心原则之一是单向数据流，即应该遵循严格的规则来更改状态。mutations 提供了一种明确、可跟踪和可预测的方式来修改状态，确保状态的变化是可追溯的，并且能够进行状态的调试和记录。

具体来说，使用 mutations 的好处有以下几点：

1. 预测性：mutations 被设计成同步函数，它们是纯函数（没有副作用），所以我们可以预测每个 mutations 执行的结果。

2. 可追溯性：由于 mutations 是同步执行的，因此我们可以准确地知道哪个 mutation 修改了状态，以及何时进行了修改。

3. 限制性：通过 mutations，我们可以约束直接修改 state 的行为。只有通过 mutations 来修改 state，才能确保状态的变化是被追踪和控制的，这样可以更好地理解和维护代码。

使用 mutations 改变状态值的方法是通过 commit 方法来触发 mutations。例如，在组件中可以使用 this.$store.commit('mutationType', payload) 来提交一个 mutation，并传递一个可选的载荷（payload）参数。

总结起来，使用 mutations 来改变 store 状态值的方法是为了遵循单向数据流、确保状态变化可预测和可追溯，并且能够限制直接修改 state 的行为，从而更好地管理和维护应用程序的状态。

Vuex数据刷新丢失如何处理

当页面刷新时，Vuex 中的数据会丢失，这是因为 Vuex 的状态存储在内存中，而不是持久化保存在浏览器中。如果希望在刷新页面后仍然保留 Vuex 中的数据，可以考虑以下几种处理方式：

1. LocalStorage 或 SessionStorage：将 Vuex 的数据存储在浏览器的 LocalStorage 或 SessionStorage 中。在每次修改 Vuex 的数据时，同时将数据同步更新到本地存储。在页面加载时，从本地存储中读取数据并重新初始化 Vuex 的状态。

• // 在 mutations 中添加逻辑以同步更新本地存储
  mutations: {
    UPDATE_DATA(state, payload) {
      state.data = payload;
      localStorage.setItem('data', JSON.stringify(payload));
    },
  }
  

• Cookies：通过设置和读取 Cookie 来保存和恢复 Vuex 的数据。与 LocalStorage 或 SessionStorage 类似，每次修改 Vuex 数据时都需要手动更新 Cookie，并在页面加载时从 Cookie 中读取数据来初始化 Vuex 的状态。

• // 使用 js-cookie 库
  import Cookies from 'js-cookie';
  
  // 在 mutations 中添加逻辑以同步更新 Cookie
  mutations: {
    UPDATE_DATA(state, payload) {
      state.data = payload;
      Cookies.set('data', JSON.stringify(payload));
    },
  }
  

• 利用持久化插件：使用 Vuex 的持久化插件，如 vuex-persistedstate，它可以自动将 Vuex 的状态保存到浏览器的本地存储中，并在页面加载时恢复状态。只需简单配置插件即可实现数据的持久化。

1. // 安装并配置 vuex-persistedstate 插件
   import createPersistedState from 'vuex-persistedstate';
   import Vuex from 'vuex';
   
   const store = new Vuex.Store({
     // ...
     plugins: [createPersistedState()],
   });
   

上述方法都可以在页面刷新后保留 Vuex 中的数据，但需要根据具体需求选择合适的方案。请注意，将大量数据存储在浏览器中可能会导致性能问题或安全风险，因此需要谨慎使用和处理敏感数据。