Vuex 是什么? 从基本使用到优势解读

2023-09-24 23:01:38

揭开Vuex的神秘面纱：它到底是什么？

Vuex 是一个专门为 Vue.js应用程序开发的状态管理库。它采用集中式存储的方式，使得应用程序中的所有组件都可以访问和修改同一份数据。Vuex 使得应用程序的状态易于管理和维护，并提供了许多有用的特性，如状态快照、时间旅行调试和模块化。

Vuex 的基本使用

安装 Vuex

在使用 Vuex 之前，需要先安装它。可以使用以下命令通过 npm 安装 Vuex：

npm install vuex

创建一个 Vuex 实例

在安装 Vuex 之后，就可以创建一个 Vuex 实例。可以使用以下代码创建一个 Vuex 实例：

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

Vue.use(Vuex)

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

使用 Vuex 实例

在创建 Vuex 实例之后，就可以在组件中使用它。可以使用以下代码在组件中使用 Vuex 实例：

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

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    ...mapActions([
      'incrementAsync'
    ])
  }
}
</script>