当前位置: 面试刷题>> Vuex 的 store 有几个属性值?它们的作用分别是什么?


在Vue.js的应用开发中,Vuex作为状态管理模式和库,扮演着至关重要的角色,它集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的store是状态管理的核心,它包含了几个关键的属性,这些属性共同协作,使得状态管理变得既高效又清晰。

Vuex Store的主要属性值

  1. state

    • 作用state是Vuex中用于存储应用状态的对象。它类似于组件的data属性,但它是全局的,可以在应用的任何组件中通过访问store来获取或修改这些状态。
    • 示例
      const store = new Vuex.Store({
        state: {
          count: 0
        }
      });
      
      在这个例子中,count就是存储在state中的一个状态。
  2. getters

    • 作用getters类似于组件中的计算属性,用于从state中派生出一些状态,例如对列表进行过滤并计数。Getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会重新计算。
    • 示例
      getters: {
        doneTodosCount: state => {
          return state.todos.filter(todo => todo.done).length;
        }
      }
      
      这个getters示例中,doneTodosCount根据todos状态中的完成项来计算完成任务的总数。
  3. mutations

    • 作用mutations是更改Vuex中state的唯一途径。Vuex中的mutation必须同步执行,这是为了追踪状态变化的历史,便于调试和回滚。
    • 示例
      mutations: {
        increment (state) {
          state.count++
        }
      }
      
      在这个例子中,increment是一个mutation,用于将state.count的值加1。
  4. actions

    • 作用actions类似于mutations,不同之处在于actions可以包含任意异步操作,并且可以提交mutation。在actions中,你可以执行异步操作(如API调用),并在操作完成后提交mutation来更新状态。
    • 示例
      actions: {
        incrementIfOddOnRootSum ({ state, commit, rootState }) {
          if ((state.count + rootState.otherCount) % 2 === 1) {
            commit('increment')
          }
        },
        async fetchData({ commit }) {
          const data = await fetch(/* some URL */);
          commit('setData', data);
        }
      }
      
      在这个例子中,incrementIfOddOnRootSum是一个action,它根据特定条件(当前state的count与根store中otherCount的和为奇数)来提交incrementmutation。fetchData则是一个异步action,它从某个URL获取数据,并在获取成功后提交setDatamutation来更新状态。
  5. modules

    • 作用:由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决这个问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
    • 示例(简单模块结构):
      const moduleA = {
        state: { ... },
        mutations: { ... },
        actions: { ... },
        getters: { ... }
      }
      
      const store = new Vuex.Store({
        modules: {
          a: moduleA
        }
      })
      
      在这个例子中,我们定义了一个名为moduleA的模块,并将其作为modules对象的一个属性添加到store中。这样,我们就可以在moduleA中管理一组相关的状态、mutations、actions和getters,从而保持应用的模块化和可维护性。

综上所述,Vuex的store通过state、getters、mutations、actions和modules这几个属性,提供了一个强大且灵活的状态管理解决方案。每个属性都有其特定的作用和用法,共同协作以实现应用状态的集中管理和高效更新。在开发Vue.js应用时,合理利用Vuex的这些特性,可以显著提升应用的可维护性和可扩展性。

推荐面试题