Vuex状态管理简单使用方法

vue

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。（官方文档说明）

Vuex通俗说就是组件间数据之间的共享。

首先安装vuex

直接使用npm安装 npm install vuex或者直接到页面引入vuex.js文件。

package.json文件查看安装

建立store.js文件（命名可以随便取）

定义srore.png

新的的store.js文件里面创建 state-储存状态 、Mutation-更改 Vuex 的 store 中的状态的方法、Action-提交的是 mutation

main.js引入store 这样就可以全局使用

设置好这些东西后你就可以到任何组件里面调用相应的方法

单个的状态获取

多个状态获取

引入vuex使用mapstate

引入vuex

多个状态管理使用

组件里面分发Action

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

引入vuex使用mapActions

methods写入分发