几分钟快速入门vuex

Vuex 是什么？

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

vuex使用步骤

1. 如果 项目中还没有安装vuex,需要先进行安装

npm install vuex -S

2. 安装成功之后，我们就可以在项目中尽情玩耍我们的vuex了！
3. 在项目根目录创建 store文件夹，新建index.js文件
4. 在 index.js中导入vue和vuex：基本格式如下

 import Vue from 'vue';
 import Vuex from 'vuex';
 Vue.use(Vuex);
 const store= new Vuex.store({ ... })
 //导出
 export default store

5. 在main.js中注册

import store from './store';
//这一句可写可不写
Vue.prototype.$store = store
//接着
const app = new Vue({
	store,
	...App
})

6. 在页面中，就可以快乐的使用啦！！！但是我们的数据怎么保存呢？？？

State：

公共的静态属性，相当于vue页面的data。vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；

在页面使用方式：

这样在页面中，就可以获取到 text 这个的值啦！

Getters:

计算属性，相当于vue中computed属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 ，
可以在页面通过 this.$store.getters来获取我们定义的数据；

在页面使用方式：

Mutations：

数据我们在页面是获取到了，但是如果我们需要修改count值怎么办？如果需要修改store中的值唯一的方法就是提交mutation来修改:它相当于vue中methods
它又是怎么访问的呢？
通过 this.$store.commit(‘方法名’)

使用方式：

actions:

直接使用mutations是可以达到改变状态里值的目的，但是，官方并不建议我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数：

访问方式：

这里我们把commit提交mutations修改为使用dispatch来提交actions；我们点击页面，效果是一样的。
好了，到这里已经实现了一个基本的vuex修改状态值的完整流程，基本入门就ok 了

modules:

store的子模块，开发大型项目用的，方便管理使用，用起来，和上面的一样

到这里，如果全都看懂了，vuex你已经没有压力了。但是vuex官方给了我们一个更简单的方式来使用vuex， 也就是 {mapState, mapMutations, mapActions, mapGetters}具体用法在这里就不写啦

如果这篇文章对你有帮助，有参考，就关注加点赞吧，有什么不懂的，或者是有什么错误，可以评论留言，我一定会回复的。