关于vuex的高级用法（语法糖）辅助函数及其模块化

首先我们要知道辅助函数（又称语法糖）
分为四个

1. mapState（获取数据）
2. mapMutations（获取同步方法）
3. mapGetters（相当于计算属性）
4. mapActions（获取异步方法）
   当一个组件需要多个状态的时候，这些状态都声明成计算属性过于偏长于是就有了辅助函数

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'


computed:{
    ...mapState({
        a:"a",   //  "a" 指的是state中的a
        b:"b"
    }),
    ...mapGetters({
        Val:'newVal' // 可以重新命名
    })
}

methods:{
    ...mapActions({
        getSync:'getSyncNum'
    })

    ...mapMutations({
        increament:"increament"
    })
}



template

{{a}}  {{b}}

{{getSync(1)}}

<button @click='increament(1)'></button>

3.在vue页面中引入辅助函数

import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

4.辅助函数注意事项

1.注意事项：
mapState与mapGetters推荐在计算属性里使用，可以直接做data数据使用

2. computed: {
    ...mapState(["shopData"]),
  },

3.其他辅助函数在methods里
  methods: {
    ...mapActions(["getData"]),
    ...mapMutations(["add"]),
  }

状态树结构复杂的时候，可以用modules进行管理
多人协作开发，可以用modules，避免命名空间冲突
就要用到model模块化管理数据

//创建store，分模块定义

const  test1 ={
    namespaced:true, //开启命名空间，在各组件总 ...mapState("test1",{name:"name"})
    state:{name:'test1'},
    actions:{},
    mutations:{
    changeName(state,arg){
            state.name=arg;
        },
    getters:{}
}

const test2 = {
    namespaced:true,
    state:{},
    actions:{},
    mutations:{
        
        }
    },
    getters:{}
}

new Vuex.Store({
    state:{name:"root"},
    actions,
    mutations,
    getters 
    modules:{
        test1,
        test2
    }

})


在组件中使用：

{{this.$store.state.name}}

{{name}}

{{this.$store.state.test1.name}}

{{tes1Name}}


computed:{
    ...mapState({
        name:“name"
    }),
    ...mapState('test',{   
        test1Name:'name'
    })
}
methods:{
    ...mapMutations('test1',['changeName'])
}

关于vuex超级篇，数据持久化
1.什么是数据持久化
刷新页面，数据丢失，清空，有时候我们需要把一些数据存储到本地，即使刷新也不能清空，例如：登录状态，token等
这是就需要到vuex数据持久化
我们可以使用三种方法实现vuex数据持久化；
1.我们可以将vuex的数据存储到本地缓存里面；
2.当我们再次进入的时候可以向后端请求接口放到vuex里面；
3.我们可以安装vuex-persistedstate依赖来实现；

npm install vuex-persistedstate --save

一般我常用的就是前两种方法；这个也根据自己的习惯而定；