npm 包 vuex 使用教程

在 Vue.js 应用程序中，Vuex 是一种管理状态的方式。它允许您将应用程序的所有组件状态集中到一个单一的存储库中，并提供了工具来方便地管理应用程序状态。

安装 Vuex

使用 NPM 安装 Vuex：

npm install vuex --save

创建一个 Vuex 存储库

在你的 Vue.js 应用程序中，创建一个名为 store.js 的文件，并添加以下内容：

// www.javascriptcn.com code example
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

此代码导入 Vuex 并创建一个新的存储库实例。该实例包含一个 state 对象（用于存储应用程序的状态）、mutations 对象（用于更改状态）和 getters 对象（用于从状态中派生值）。

将 Vuex 存储库添加到 Vue 应用程序中

在你的 Vue.js 应用程序的入口文件中，例如 main.js，添加以下内容：

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

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

这将创建一个新的 Vue 实例，并将 Vuex 存储库添加到该实例中。现在，您可以在任何组件中使用存储库中定义的状态、mutations 或 getters。

在组件中使用 Vuex

要在组件中使用存储库中的状态，您可以使用 mapState 辅助函数。例如，在组件中添加以下内容：

// www.javascriptcn.com code example
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

此代码使用 mapState 辅助函数来将 count 和 doubleCount 映射到组件的计算属性。它还使用 mapActions 辅助函数将 increment 映射到组件的方法。现在，当用户单击按钮时，increment 方法将调用存储库中的 increment 动作。

结论

使用 Vuex 管理状态可以使您的应用程序更具可维护性和可扩展性。通过将所有状态集中到一个单一的存储库中，您可以轻松地管理应用程序状态并确保组件之间的数据同步。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/32361