一、为什么使用vuex ： https://www.cnblogs.com/goloving/p/9080005.html
vuex的功能 和 localstorage 的作用是一样，把数据在一个所有页面都可以存取的地方。但是vuex的数据具有响应式（类似数据双向绑定），而 localstorage 的数据是固定的，必须手动设置。
二、vuex 的使用：https://www.cnblogs.com/hermit-gyqy/p/11270315.html（更直观） 或 https://blog.51cto.com/9161018/2351075（说明更详细） 或 https://vuex.vuejs.org/zh/guide/（官网）
1、基本使用方法：
state：存储状态（可以理解为变量）可以从计算属性中返回某个状态
getters：通常用在数据的二次处理（过滤数据...），可以理解为state的计算属性
mutations：修改状态，并且是同步的。
actions：异步操作。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) const store = new Vuex.Store({
state: { // 存储状态（可以理解为变量）可以从计算属性中返回某个状态
count: 8
},
getters: { // 通常用在数据的二次处理（过滤数据...），可以理解为state的计算属性
newCount (state) {
return state.count + 1 // 这里一旦count改变，newCount也会同步改变
}
},
mutations: { // 修改状态，并且是同步的
changeCount (state, val) {
state.count = val
}
},
actions: { // 异步操作
actCount (context, val) {
setTimeout(function () {
context.commit('changeCount', val) // 直接可以获取到commit方法，不用是context.commit
}, 1000)
}
}
}) export default store
注：不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
三、vuex 的 模块化：便有扩展 https://vuex.vuejs.org/zh/guide/modules.html（官网，比较详细）
modules： Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter 用法其实和上面是一样的。
注意：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
说明：vuex的数据，每一个组件文件都有很多的数据，如果把所有的数据都放在一个文件中，就会很不好管理。所以需要把vuex数据拆分出来，一个vuex文件管理一个页面中数据。
// vuex目录下的index.js
import Vue from 'vue'
import vuex from 'vuex'
import acApply from './active-apply'
import ContentStore from './content' // 引入content.js
Vue.use(vuex)
export default new vuex.Store({
modules: {
acApply,
content: ContentStore
}
})
/* acApply 模块 */
export default {
state: {
userMsg: 99
},
mutations: {
cgUserMsg (state, val) {
state.userMsg = val
}
}
}
1、获取content模块中 store 的数据
<div>{{$store.state.content.count}}</div>2、调用模块内的 action、mutation 和 getter 方法：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。
this.$store.commit('cgUserMsg',45) // 和调用全局store中的对应方法一样3、命名空间： 默认情况下，模块内部的 action、mutation 和 getter是全局的，如果需要模块具有更高的封装度和复用性，可以给我们设置命名空间。
参考：使用模块后不借助辅助函数访问数据的方法 https://blog.csdn.net/weixin_43660626/article/details/90448312
/* acApply 模块 */
export default {
namespaced: true,
state: {
userMsg: 99
},
mutations: {
cgUserMsg (state, val) {
state.userMsg = val
}
}
}
this.$store.commit('acApply/cgUserMsg',45) // 调用的时候带上模块名称四、使用 Vuex 的辅助函数：https://www.jianshu.com/p/46ed0316c31b 或 https://www.jianshu.com/p/7f790b4188e5 或 https://www.cnblogs.com/padding1015/p/8734031.html 或 https://vuex.vuejs.org/zh/api/#mapstate（官网）
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'1、mapState：将store中state数据映射到组件的计算属性中computed中：映射后，组件通过this.name就可以获取到了。
注意事项，映射的名称不要和当前组件的data，methods名称发生冲突，否则会被覆盖。
computed: {
...mapState(["name"]), //name和vuex中的state保持一至。直接把vuex中的name映射到当前组件中
},
create () {
console.log(this.name) // 组件中可以直接通过this获取到vuex里面的state值
}2、mapMutations：把mutations里面的方法映射到methods中
methods: {
...mapMutations(['changeCount']), // mapMutations映射到组件的methods中
test () {
this.changeCount(323) // 组件中直接使用，vuex中 mutations 里的方法
}
}3、mapAcions：把actions里面的方法映射到methods中
4、mapGetters：把getters属性映射到computed身上
注意：
1、this.$store.commit 有两种写法：
//写法一
this.$store.commit('add',{n:10})
//写法二
this.$store.commit({
type:'add',
n:5
})
2、getters 和 state 一样都是存储数据的，但是getter的数据通常是对state 数据的二次处理。就是类似计算属性的功能，
store中getters数据的获取，和state获取挂载的对象不同。这点和组件中的 计算属性有点不同：
this.$store.state.count // stete中值的获取
this.$store.getters.newCount // getters 中值的获取
3、为什么要把 同步 和 异步 区分开：https://www.zhihu.com/question/48759748（看尤雨溪的回答）
区分 actions 和 mutations 目的是 为了能用 devtools 追踪状态变化。（就是为了便于调试）
体会：vuex的明显一个作用就是页面间数据变动是同步的。比如，一个页面中有显示支付银行卡的卡号好，还有选择银行卡的按钮。点击选择银行卡的按钮，
要跳到另外的一个页面中去选择。选好后，跳回来(回退)，如果是用vuex的话，之前的页面显示的银行卡号会同步为自己选择的银行卡号。
不然的话就需要先存了缓存(本地存储，或公共变量中)，然后在相应的页面中去取。比较麻烦。
五、vuex 使用模块后借助辅助函数访问数据的方法：https://vuex.vuejs.org/zh/api/#mapstate（官网中有比较明确的说明）
视频 听课笔记
1、mutations是唯一一个可以改变vuex状态的方法集。
映射到计算属性中computed