vuex (概念几部分组成map高级语法数据持久化)

Posted 2021-07-08 fengshaopu

一、概念
1.vuex是状态管理工具、主要实现组件通信中的数据共享

2.在项目比较庞大的时候使用vuex

二、几部分组成
1.state 数据存储

 1. <template>
 2.  <div> {{$store.state.a}} </div> 
 3. </template> 
 4. state: {
     a:"a"   
    },

2.metations 可以直接操作state中的数据
需要有事件调用

  methods: {

  tz(){
      this.$store.state("a")
       }
    }
     mutations:{
       a(state){
         state.a
       }
  },

3.actions 异步调用、可以通过dispatch调用metations的方法可以直接修改state中的数据

    this.$store.dispatch('increment')
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }

4.gettrers 类似于计算属性、可以做一些逻辑性的操作

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

5.module 将分模块化存储

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 的状态

三、map高级语法
1.语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters

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

2.使用map
先通过导入…辅助函数，在计算属性通过…导入进来的辅助函数,就可以使用了

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>

四、数据持久化
数据持久化就是刷新页面数据不丢失会永久保存，可以用于存储一些值，token等等

使用的话：1.安装vuex-persist
查看地址：https://www.jianshu.com/p/a4faae6a3184?tdsourcetag=s_pcqq_aiomsg%EF%BC%9B

cnpm installvuex-persist --save

2.然后在vuex组件里面配置
1.先导入vuex-persist
2.先创建一个对象并进行配置
3.引入进vuex插件：

import VuexPersistence from 'vuex-persist'      1.先导入vuex-persist
 
const vuexLocal = new VuexPersistence({   2.先创建一个对象并进行配置 
    storage: window.localStorage,  //后面可以跟key值
     "key":"我"
})

 plugins: [vuexLocal.plugin] 3.引入进vuex插件：