什么是vuex ？

专为 Vue.js 应用程序开发的 状态管理模式 ，其实就是一个第三方存数据的仓库

vuex的特点

• 刷新页面就会重新刷新数据，不存在数据持久化，除非专门配置

  Vuex的基础api

• state 就是一个存数据的地方，类似react组件中的state

• mutations 是用来存放修改state值的方法
• actions 一般异步方法都写在这个里面
  • 我们推荐修改数据尽量使用mutations来，因为actions虽然也能修改数据，但是subscribe方法只能监听当使用mutations里面方法修改数据的时候
• subscribe 当vuex里面state中的数据发生变化他都会监听到
• getters 类似于vue组件中的computed，这里面的方法一般都是生成动态数据的
• plugins 用来配置比如说数据持久化，打印日志
• modules 用来合并模块的，类似于redux中的combinreducers

Vuex中这些api如何使用

import { mapMutations , mapGetters , mapActions , mapState  } from 'vuex'
methods: {
    ...mapMutations(['方法名1','方法名2'])
    ...mapActions(['方法名1','方法名2'])
  // 多种写法，推荐对象写法
    ...mapActions({
          getAllComment: "comment/getAllComment",
          addComment: "comment/addComment",
     }),
}
computed:{
        ...mapState(['数据名']),
    ...mapState({
          // 组件中的名字                因为使用了module管理模块，所以需要点模块名来取值
        commentList: state => state.comment.commentList
     }),
    ...mapGetters(['方法名1','方法名2'])
}

state中的数据和getter中的数据必须写在computed中才能使用 ， mutations和actions中的数据必须写在methods中

Vuex中打印日志的插件

import { createLogger } from 'vuex'
plugins: [createLogger()]

vuex 的监听函数

// subscribe 是用来监听 store -> state 的数据发生改变时，出发的函数
// 这个函数的出发条件必须是  mutation 发生改变之后
store.subscribe((mutation, state) => {
  // 每次 mutation 之后调用
  // mutation 的格式为 { type, payload }
  console.log(mutation, state);
  // 可以对 state 的更新做一次处理
  // 本地存储
})