在 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 管理状态可以使您的应用程序更具可维护性和可扩展性。通过将所有状态集中到一个单一的存储库中，您可以轻松地管理应用程序状态并确保组件之间的数据同步。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/32361