vuex（五大核心，高级用法—辅助函数，数据持久化）

我们来说说什么是vuex

1.什么是vuex

Vuex 是一个专为Vuex.js应用程序开发的状态管理模式，他由五部分组成：
分别是：state，actions，mutations，modulse，getters

2.vuex的五大核心

1.state：存放状态

存放公共数据，是一个仓库，任何组件都可以调用里面的数据。
使用：在state中直接声明数据即可。

2. getters：vuex中的计算属性

相当于组件中的计算属性，当state中的数据发生改变，getters中的数据也回跟着改变
使用：在vuex中跟state同级，用发跟vux中像似。

3.mutations

是调用state中数据的 ，可以对state中的数据进行添加和修改。
使用方法是在this.$store.commit()

4.Actions 异步

在仓库store中定义需求调用mutations方法，在对应组件中定义触发更改状态的模板和方法
注意：mutations必须是同步函数，actions可以为异步函数。

5.modules 模板

​ 在仓库中定义不同的模板以及modules方法，
​ 在对应的组件获取并显示在页面上
​ 一般在做大型项目的时候，用来管理的

3.vuex的数据持久化

vuex的持久化工具 本地存储的工具
会帮我们自动把vuex里的数据存在本地存储中 不需要我们再写任何跟本地存储有关的代码
注意：只有在vuex底下才能用
Vuex-persist
第一步：安装 cnpm i vuex-persist --save
第二部 在store/index 引入 import vuexpersist from “vuex-persist”
第三步 配置

plugins:[
   new vuexPersist({
     storage:window.localStorage
   }).plugin
]

4.高级用法—辅助函数(语法糖)

语法糖，辅助函数：mapstate,mapActions,mapMutations,mapGetters

当一个组件需要多个状态时这些状态，这些状态都声明成计算属性过于冗长，于是就有了辅助函数

注：mapState，mapGetters返回的是属性，所以混入到 computed 中，mapMutations，mapActions返回的是方法，只能混入到methods中
使用：

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    //mapState就等于下面这个
    // counts(){
    //   return this.$store.state.count
    // },
    ...mapGetters({
      getternum:'doneTodos'
    }),
    //mapGetters就等于下面的这个
    // getternum(){
    //   return this.$store.getters.doneTodos
    // }

  },
  methods:{
    ...mapMutations({
      addnum:'addNum'
    }),
    addnum1(){
      this.addnum()
    },
    //mapMutations就等于下面的这个
    // addnum1(){
    //   this.$store.commit('addNum')
    // },
    
    ...mapActions({
      actionnum:'actionNumAdd'
    }),
    actionnum6(){
      this.actionnum()
    },
    //mapActions就等于下面的这个
    //  actionnum6(){
    //   this.$store.dispatch('actionNumAdd')
    // }
    
  }
}
</script>