在 Vue.js 应用程序中,Vuex 是一种管理状态的方式。它允许您将应用程序的所有组件状态集中到一个单一的存储库中,并提供了工具来方便地管理应用程序状态。
安装 Vuex
使用 NPM 安装 Vuex:
--- ------- ---- ------
创建一个 Vuex 存储库
在你的 Vue.js 应用程序中,创建一个名为 store.js 的文件,并添加以下内容:
------ --- ---- ----- ------ ---- ---- ------ ------------- ------ ------- --- ------------ ------ - ------ - -- ---------- - ---------------- - ------------- - -- -------- - ------------------ - --------------------------- - -- -------- - ------------------ - ------ ----------- - - - - --
此代码导入 Vuex 并创建一个新的存储库实例。该实例包含一个 state
对象(用于存储应用程序的状态)、mutations
对象(用于更改状态)和 getters
对象(用于从状态中派生值)。
将 Vuex 存储库添加到 Vue 应用程序中
在你的 Vue.js 应用程序的入口文件中,例如 main.js,添加以下内容:
------ --- ---- ----- ------ --- ---- ----------- ------ ----- ---- --------- --- ----- ------- - -- ------- ----- -----------------
这将创建一个新的 Vue 实例,并将 Vuex 存储库添加到该实例中。现在,您可以在任何组件中使用存储库中定义的状态、mutations 或 getters。
在组件中使用 Vuex
要在组件中使用存储库中的状态,您可以使用 mapState
辅助函数。例如,在组件中添加以下内容:
---------- ----- --------- -- ----- ------ --------- ------ -- ----------- ------ ------- ------------------------------------- ------ ----------- -------- ------ - --------- ---------- - ---- ------ ------ ------- - --------- - --------------------- --------------- -- -------- - ---------------------------- - - ---------
此代码使用 mapState
辅助函数来将 count
和 doubleCount
映射到组件的计算属性。它还使用 mapActions
辅助函数将 increment
映射到组件的方法。现在,当用户单击按钮时,increment
方法将调用存储库中的 increment
动作。
结论
使用 Vuex 管理状态可以使您的应用程序更具可维护性和可扩展性。通过将所有状态集中到一个单一的存储库中,您可以轻松地管理应用程序状态并确保组件之间的数据同步。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/32361