Vuex 是如何存储并修改数据的

2023-12-20 12:44:11

Vuex 的五个属性

Vuex 提供了五个属性来帮助您管理应用程序状态：

state ：state 属性是一个对象，用于存储应用程序的状态。您可以使用 this.$store.state 访问 state 对象。
getters ：getters 是用于从 state 对象中派生新数据的函数。您可以使用 this.$store.getters 访问 getters。
mutations ：mutations 是用于修改 state 对象的函数。您可以使用 this.$store.commit() 方法来提交 mutations。
actions ：actions 是用于执行异步操作的函数。您可以使用 this.$store.dispatch() 方法来分发 actions。
modules ：modules 是用于将 store 拆分为多个独立模块的功能。您可以使用 this.$store.registerModule() 方法来注册模块。

如何使用 Vuex

要使用 Vuex，您需要在您的 Vue.js 应用程序中安装它。您可以使用以下命令来安装 Vuex：

npm install vuex

安装 Vuex 后，您需要在您的 Vue.js 应用程序中创建一个 store 实例。您可以使用以下代码来创建一个 store 实例：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  modules: {
    user: {
      state: {
        name: 'John Doe'
      },
      getters: {
        fullName: state => state.name + ' ' + state.lastName
      }
    }
  }
})

export default store

创建 store 实例后，您就可以在您的 Vue.js 组件中使用它了。您可以使用 this.$store 来访问 store 实例。

例如，以下代码演示了如何在一个 Vue.js 组件中使用 Vuex：

<template>
  <div>
    <p>Count: {{ this.$store.state.count }}</p>
    <p>Double Count: {{ this.$store.getters.doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

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