如何轻松学习Vuex？跟着这篇文章，只需三分钟！

2023-09-19 13:16:58

Vuex 是一个用于管理 Vue.js 应用程序状态的库。它采用单向数据流模式，将应用状态集中存储在一个 store 对象中，并通过 mutation 和 action 来修改状态，确保数据变化的可追踪性和可预测性。本文将指导你如何轻松学习 Vuex，仅需三分钟！

什么是 Vuex？

Vuex 是 Vue.js 的状态管理模式和库。它集中存储应用的所有组件的状态，并提供了一系列方法来访问和修改这些状态。Vuex 使得在大型应用中管理状态变得简单高效。

安装 Vuex

首先，你需要安装 Vuex。你可以使用 npm 或 yarn 来安装：

npm install --save vuex
# 或者
yarn add vuex

创建一个 Vuex Store

安装完成后，你可以创建一个 Vuex store。下面是一个简单的例子：

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

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

Vue.use(store)

export default store

在 Vue 应用程序中注册这个 store：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在组件中使用 Vuex

在 Vue 组件中，你可以通过 this.$store 访问 store 对象，并使用 state 和 commit 来获取和修改状态。

获取状态

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

修改状态

methods: {
  increment () {
    this.$store.commit('increment')
  }
}

Vuex 的核心概念

State

Vuex 的核心是 state，它是一个对象，包含了应用程序的所有共享状态。

Mutation

Mutation 是唯一更改 state 的方法。每个 mutation 都有一个字符串类型的类型和一个回调函数。

Action

Action 类似于 mutation，但它们可以包含任意异步操作，并且通过提交 mutation 来改变 state。

Getters

Getters 用于从 state 中派生出一些状态，类似于 Vue 组件中的计算属性。

示例：使用 Action 和 Mutation

下面是一个使用 action 和 mutation 的例子：

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

在组件中使用：

methods: {
  increment () {
    this.$store.commit('increment')
  },
  async incrementAsync () {
    await this.$store.dispatch('incrementAsync')
  }
}