认识vuex及使用

什么是vuex：是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
为什么用vuex：进行统一的状态管理，解决不同组件共享数据的问题，不同视图需要变更同一状态的问题，使用vuex之后，状态变化更加清晰
vuex的五个核心模块是state是全局初始状态值，getters：对初始状态值进行初加工，mutations(木有太深s)：用于修改全局初始状态值，里面是一个函数，actions：效果与mutations一样，不同点是actions可用于写异步操作
modules：模块化，
vuex状态刷新重置解决方法是在根目录下的生命周期里通过请求回来的用户信息来判断是非登录了，然后再把需要的属性改为全局的
vuex：state是全局初始状态值（相当于一个共用的data），取出的方法是this.$store.state.参数，简写方法为mapState辅助函数（先引入import {mapState} from "vuex";）
在computed：{}（数据监听）中写...mapState({num:'num'}),底层原理是unm:state => {return state.num}
getters：对初始状态值进行初加工，里面是一个函数，参数是state，用return返回内容，取出的方法是this.$store.getters.函数名,简写方法与state一样
mutations：用于修改全局初始状态值，里面是一个函数，参数是state和payload，函数体直接写state.属性 = payload，调用这个方法用this.$store.commit（方法名，要传的数据）
actions：效果与mutations一样，不同点是actions可用于写异步操作，如定时器和请求,actions不能直接修改state，需要先触发mutations，函数，参数是context（上下文环境（是一个对象里面能拿到数据和方法））payload（传过来的内容）
使用方法如定时器：setTimeout(()=>{context.commit('mutations中的方法名'，payload)})
调用方法this.$store.dispatch(方法名，要传的数据)
modules：模块化，由于使用单一的状态树，项目中的状态会集中在一起，导致难以维护，这个时候可以通过module对store进行拆分
使用module之后，每个模块都有自己的state、mutation等内容，方便维护
使用方法是在store中新建一个js文件，里面的东西与index中的东西一样
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
然后exprot{{文件名}}导出，在index中import 名字 from 路径导出，在module中写下名字，调用是this.$store.state.文件名.参数