玩转Vuex：初体验Vuex的第一个例子

2023-10-19 05:33:51

如果您是Vue.js的忠实粉丝，那么您一定听说过Vuex——一个专为Vue.js应用程序开发的状态管理库。它凭借着集中式存储管理应用程序所有组件的状态，以及保证状态变化的可预测性，在Vue.js开发社区中广受好评。

Vuex采用了一种非常巧妙的设计模式，将状态管理中的各种概念清晰地定义和隔离，并通过强制规则维持视图和状态之间的独立性。这不仅让我们的代码变得更加结构化和易于维护，还大幅提升了应用程序的健壮性和可维护性。

那么，如何开始使用Vuex呢？别着急，让我们一起踏上Vuex之旅，从它的第一个例子开始。

1. 安装和设置Vuex

首先，我们需要在项目中安装Vuex。您可以使用以下命令通过npm进行安装：

npm install vuex

安装完成后，在main.js文件中引入Vuex并将其作为Vue实例的插件进行安装：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 这里定义状态、getter、mutation和action
})

export default store

2. 创建状态

在Vuex中，状态是一个包含应用程序所有组件共享数据的对象。我们可以通过以下方式创建状态：

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

在上面的示例中，我们创建了一个名为count的状态，其初始值为0。

3. 获取状态

为了在组件中获取状态，我们可以使用Vuex提供的$store属性：

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

在上面的示例中，我们通过computed属性来获取count状态，并将其作为组件中的一个计算属性。

4. 更改状态

在Vuex中，我们只能通过mutation来更改状态。Mutation是一个提交给store的函数，它接收一个state作为参数，并在其中执行一些操作以更改state。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

在上面的示例中，我们创建了一个名为increment的mutation，它会将count状态的值增加1。

要提交mutation，我们可以使用以下方式：

this.$store.commit('increment')

5. 使用getter

Getter是一个计算属性，它允许您从state中获取派生的数据。这对于您需要从多个state属性中计算出新值的情况非常有用。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

在上面的示例中，我们创建了一个名为doubleCount的getter，它将count状态的值乘以2。

要使用getter，我们可以使用以下方式：

export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  }
}

6. 使用action

Action是一个函数，它允许您执行异步操作并提交mutation。这对于您需要在服务器端获取数据或执行其他耗时操作的情况非常有用。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})