Vuex有几种属性，它们存在的意义分别是什么？

梦旅ya

已于 2023-06-02 22:01:29 修改

阅读量224

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

于 2023-06-02 21:48:44 首次发布

本文链接：https://blog.csdn.net/weixin_62992614/article/details/131014521

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

先说结论：有五种，分别是 State、Getter、Mutation、Action、Module。

state

用于存储应用程序的状态，也就是数据。state是响应式的，只能通过提交mutations来修改。

getters

用于从state中派生出新的状态，类似于Vue组件中的计算属性。当依赖的state发生变化时，会重新计算getter的值。getter的返回值可以缓存起来，避免多次重复计算。

mutations

在Vuex中，state是只读的，也就是说我们不能直接修改Vue应用程序的状态。为了修改Vuex中的state，必须通过提交(mutating)一个mutation来实现。

Mutation是一个同步函数，用于操作store中的state数据。它们接收当前state作为第一个参数，以及可能存在的负载payload作为第二个参数。Mutation只能通过commit方法触发，而且必须显式地调用。

例如：

// 定义一个mutation
const mutations = {
  increment(state, payload) { // 修改state的count属性
    state.count += payload.amount;
  }
}
// 在组件中提交该mutation
this.$store.commit('increment', { amount: 10 });

上面的示例中，在mutations中定义了一个increment方法，用于增加state中的count属性。然后在组件中调用$store.commit方法来触发该mutation，并将额外数据{ amount: 10 }传递给mutation。mutation接受到该负载之后，就可以根据需要修改state中的数据。

需要注意的是：mutation必须是同步函数，不能进行异步操作。这是因为所有的mutation都会被记录下来，并且按照提交的顺序依次被执行，异步操作很容易导致状态不一致的问题。如果需要使用异步操作，应该使用actions，并在actions中触发mutation。

actions

用于处理异步操作或批量操作，可以通过提交mutations间接地修改state。当我们需要进行异步操作时，就需要使用Vuex中的actions。在Vue组件中，我们可以直接调用异步操作的方法，而在Vuex中，我们必须先定义一个action来执行该异步操作，并通过提交mutation来修改state。

Action通常是异步的操作，但也可以是同步操作，它们接收一个context对象作为参数，该对象包含和store实例具有相同方法和属性的对象。此外，actions可以返回一个Promise对象，表示异步操作的结果，或者可以返回一个值，表示同步操作的结果。

例如，假设我们的应用程序中有一个异步请求，请求服务器上的数据，然后将其放入state中：

// 定义一个名为loadData的异步操作
const actions = {
  loadData(context) {
    axios.get('/api/data')
      .then(response => {
        // 数据成功返回，提交一个mutation来修改state
        context.commit('setResult', response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }
}

// 在组件中分发该action
this.$store.dispatch('loadData');

在上面的示例中，我们首先在actions中定义了一个loadData的异步操作，它发起一个HTTP GET请求来获取数据。当响应成功返回时，我们通过提交(setResult)mutation的方式来改变store中的状态。在组件中，我们可以分派该action来触发异步请求，并等待结果。

需要注意的是：actions和mutations不同之处在于，actions是可以进行异步操作的，也就是说，我们可以在actions里面发起异步请求，甚至是调用其他的actions。而mutations只能进行同步操作，在mutations中执行的任何代码都应该是同步代码，因为Vuex无法保证mutation的执行顺序。因此，如果需要进行异步操作，应该把异步操作放到action中，然后使用commit方法来触发mutation。