vuex是什么？怎么使用？使用场景有哪些？

Q: vuex是什么？

A: vuex形象的说是一个数据共享仓库，用于在组件关系复杂的情景下也能轻松地进行组件间数据通信。官方的说法是 “一个专为 Vue.js 应用程序开发的状态管理模式，用于集中式存储管理应用的所有组件的状态”。传统的，子组件向父组件通信依赖调用实例的$emit函数，父组件向子组件通信使用props属性传参，但是关系较远的两个组件再使用这种方式必然十分繁琐。或许在根实例上注入共享数据，子组件通过 this.$root 去访问根实例的数据，在少量组件的情况下较为方便，而在大量组件的应用场景中，如此操作会使根实例的数据变得十分臃肿，难以阅读。而vuex正是解决这种问题，专门用一个仓库去存放公共数据。

---

Q：怎么使用？

A：

核心：当给Vue构造函数使用use方法注入 vuex 插件后，在组件中可以使用 this.$store 访问到状态库；接下来通过访问、调用store中的属性实现数据通信。
State：通过 this.$store.state 可拿到公共状态数据
Getters：类似组件的computed，getters对象中定义一条属性方法，该方法第一个参数默认为state，这样就可以拿到state里的数据并通过写逻辑return一个你想要的数据。调用getters中的方法为：this.$store.fn 或 this.$store.fn(params)

getters: {//返回state.count + 1的结果
  fn: state => state.count + 1;
}

getters: {//可以返回一个匿名函数，实现getter属性传参
  fn: state => num => state.count + num;
}

Mutations：类似组件的methods，官方规定不允许直接给 this.$store.state.xxx 属性直接赋值来修改状态，应该用调用mutations来修改状态数据。Mutation执行模式为同步执行，即不能写异步函数，比如定时器和延时器会出错。调用mutations中的方法时，使用commit指令。即 this.$store.commit('addCount')，注意这里要传字符串属性名。第一个参数为state，从第二个参数开始为调用函数的参数。

mutations: {
    addCount(state) {
      state.count++;
    }
}

Actions：和Mutations类似，区别在于其执行模式为异步执行，调用actions中的方法使用dispatch指令，指令函数接受参数略有不同。即 this.$store.dispatch('addCountAsync')。那么如何知道 action 什么时候结束呢？return一个Promise实例即可 this.$store.dispatch('addCountAsync').then(()=>{//...})。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

    actions: {
        addCountAsync({commit}) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('addCount');
                    resolve();
                }, 1000)
            })
        }
    }

Modules：项⽬特别复杂的时候，可以让每⼀个模块拥有⾃⼰的 state 、mutation 、 action 、 getters ，使得结构⾮常清晰，⽅便管理。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

---

Q:使用场景？

A:单⻚应⽤中，组件之间的状态、⾳乐播放、登录状态、加⼊购物⻋等。