为了更方便的管理vue中的数据，需要了解并掌握官方提供的vuex
vuex是什么：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
vuex的使用步骤：
- 在Vue项目中引入Vuex，并配置Vuex 2.在Vuex中定义公共数据及相应的操作方法 3.在任意组件中使用Vuex(必写项如下：)
（1）. 读取公共数据 （2）. 修改公共数据 会直接影响到所有使用公共数据的组件
erDiagram
Vuex ||..|{ state : attribute
Vuex ||..|{ mutations : attribute
Vuex ||..|{ getters : attribute
Vuex ||..|{ actions : attribute
Vuex ||..|{ modules : attribute
state||..|{ object: use
mutations||..|{ function: use
getters||..|{ function: use
actions||..|{ request: use
modules||..|{ allOfThis: use
在使用前需要安装引入：1.安装：npm i vuex 2. 配置：在src目录下创建store文件夹新建文件store.js 并配置如下代码：
`import Vuex from 'vuex'
Vue.use(Vuex) const store = new Vuex.Store({ state: { name：'' } }) export defalut store`
- 使用store实例：在项目的main.js中引入 `import store from './store'
new Vue({ // 省略其他... store //注入Vue实例 })`
| 属性 | 作用 | 定义 | 使用 |
|---|---|---|---|
| state | 统一定义公共数据（类似于data） | state:{name:'张三'} | {{$store.state.name}} |
| mutations | 修改数据 | mutations:{mutation名：function(state ，载荷) { }} | 方式1：this.$store.commit('mutation名', 载荷)方式2（map辅助函数）：methods: { ...mapMutations(['mutation名']), ...mapMutations({'新名字': 'mutation名'})} |
| getters | 在state的基础上，派生出新的数据项 | getters: {getter的名字: function(state) {return 要返回的值}} | 方式1：$store.getters.getter的名字方式2（map辅助函数）：computed: { ...mapGetters(['xxx']),...mapGetters({'新名字': 'xxx'})} |
| actions | 一般用来发送请求 | actions: {// context对象会自动传入，它与store示例具有相同的方法和context对象action的名字: function(context, 载荷) {// 1. 发异步请求, 请求数据// 2. commit调用mutation来修改/保存数据// context.commit('mutation名', 载荷)}} | 方式1：this.$store.dispatch('actions的名字', 参数)方式2（map辅助函数）：methods: { ...mapActions(['mutation名']), ...mapActions({'新名字': 'mutation名'})} |
| modules | 一般用来扩展vuex | modules: {模块名： {// 这个为true，则在使用mutations时，就必须要加上模块名namespaced: true, state: {},getters: {},mutations: {},actions: {},modules: {}}} | 如果namespaced为true，则需要额外去补充模块名; 如果namespaced为false，则不需要额外补充模块名 |
