Vuex超简单，三步精通，触类旁通

前端

2024-02-09 00:38:52

Vuex：三步精通，触类旁通

Vuex 是一个专为 Vue.js 应用程序设计的轻量级状态管理库。它采用集中式存储管理应用的所有组件的状态，并提供统一的方式来修改和访问这些状态。这使得状态管理变得更加简单和高效，尤其是在大型应用程序中。

第一步：基本概念

在开始使用 Vuex 之前，我们先来了解一些基本概念：

状态： 应用程序中的数据，可以被组件访问和修改。
组件： 应用程序中的独立部分，可以复用和组合。
模块： Vuex 中的一种组织结构，可以将状态、mutations、actions 和 getters 分组。
mutations： 唯一可以修改状态的方法。
actions： 负责异步操作，如网络请求。
getters： 类似于计算属性，用于从状态派生新的状态。

第二步：使用 Vuex

安装 Vuex：

npm install vuex

创建 Vuex 实例：

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

Vue.use(Vuex)

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

在组件中使用 Vuex：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    },
    doubleCount () {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    incrementAsync () {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>