一、什么是vuex
1.1官方介绍：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1.2简单总结：
vuex就是一个数据管理的仓库。 1. 也就是把组件公共的数据放在一个仓库里统一管理，在这个仓库的内部对数据进行增删查改。 2. 这样可以减少组件之间的通信，让组件数据的共享化。只要仓库的数据发生变化，各个组件引用到的数据也会更新。这样使得数据的可维护性更好。
二、vuex 基础
2.1.state
概念：
定义全局参数，所有的数据都会存储到state里面，也就是用来存数据的地方
使用：
借助辅助函数
<script>
//引入辅助函数
import { mapMutations, mapState } from "vuex";
computed: {
...mapState(["count"]),
},
</script>
<template>
<h5>count :{{ $store.state.count }}</h5>
<h5>count :{{ count }} 辅助形式</h5>
</template>
2.2.muations
概念：
在vuex中，mutations里面存的就是一些操作数据的方法，也是将唯一能够修改数据的方法放在mutation对象里。
使用：
同样也是两种访方式， 常规方法 / 辅助函数
//定义修改vuex数据方法 只能这里修改数据
mutations: {
addCount(state, payload) {
state.count += payload
}
},
//直接从原型上调用
<button @click="$store.commit('addCount', 1)">+1常规方法</button>
//利用辅助函数
<button @click="addCount(100)">+100辅助函数</button>
<script>
import { mapMutations, mapState } from "vuex";
methods: {
...mapMutations(["addCount"]),
},
</script>
2.3.actions
概念：
Actions和Mutations比较类似，包含的都是一些方法，区别在于 Action支持异步操作，一般会与Mutations的方法配合使用，在Action里面进行异步操作，然后再Mutations去更改数据
使用：
//vuex内定义action方法
// 异步修改数据
actions: {
setCount2(context, payload) {
setTimeout(() => {
console.log(context, '111');
context.commit('addCount', payload)
}, 1000)
},
},
//常规调用
<button @click="$store.dispatch('setCount2', 5)">异步</button>
//借用辅助函数，
<button @click="setCount2(5)">异步辅助函数</button>
import { mapActions } from "vuex";
methods: {
...mapActions(["setCount2"])
}
2.4.getters
概念：
每次打开浏览器优先执行该方法，获取所有的状态并且对数据进行一些加工和处理,有点像过滤器。 也可以再getters里面导出state数据的跨界访问方式。
使用：
//vuex 定义getters方法
getters: {
count: (state) => state.count
//也可以做数据处理
showAge(state) {
if (state.count< 18) {
return '仙女'
} else {
return '老巫婆'
}
}
},
<div>getters导出: {{ count }}</div>
<script>
import { mapGetters } from "vuex";
computed: {
...mapGetters(["token", "name", "count"])
}
</script>
2.5modules
概念：
在数据种类多，且有命名重复的情况，Vuex 允许将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
modules中每一个模块都可以设置一个namespace=true，也就是相当于给每个子模块仓库装了一个门（）
使用：
modules: {
user: {
//门
namespaced: true,
state: {token: '21111'},
mutations: {ddCount(state) {state.token += 1}},
actions: {},
getters: {}
},
访问里面的数据 namespaced: false,模块里面的每个子模块的数据方法跟上面的方法一样的 namespaced:true,访问这个子模块的时候需要定位，也就是找到门再能拿数据，比如
//访问state
<div>用户token: {{ $store.state.user.token }}</div>
...mapState("setting", ["name"]),
//访问mutations:
...mapMutations(["user/upDateToken"]),
总结
差不多就这样，关于vuex的使用的话就潦草的这么多，关于模块、namespace的详细用法可以再去查一查，vuex的使用还是给组件通信带来很大的方便！
