在 Vue.js 应用程序中，Vuex 是一种管理状态的方式。它允许您将应用程序的所有组件状态集中到一个单一的存储库中，并提供了工具来方便地管理应用程序状态。
安装 Vuex
使用 NPM 安装 Vuex：
npm install vuex --save
创建一个 Vuex 存储库
在你的 Vue.js 应用程序中，创建一个名为 store.js 的文件，并添加以下内容：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ---- ---- ------ ------------- ------ ------- --- ------------ ------ - ------ - -- ---------- - ---------------- - ------------- - -- -------- - ------------------ - --------------------------- - -- -------- - ------------------ - ------ ----------- - - - - --展开代码
此代码导入 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 辅助函数。例如，在组件中添加以下内容：
-- -------------------- ---- ------- ---------- ----- --------- -- ----- ------ --------- ------ -- ----------- ------ ------- ------------------------------------- ------ ----------- -------- ------ - --------- ---------- - ---- ------ ------ ------- - --------- - --------------------- --------------- -- -------- - ---------------------------- - - ---------展开代码
此代码使用 mapState 辅助函数来将 count 和 doubleCount 映射到组件的计算属性。它还使用 mapActions 辅助函数将 increment 映射到组件的方法。现在，当用户单击按钮时，increment 方法将调用存储库中的 increment 动作。
结论
使用 Vuex 管理状态可以使您的应用程序更具可维护性和可扩展性。通过将所有状态集中到一个单一的存储库中，您可以轻松地管理应用程序状态并确保组件之间的数据同步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32361
