vuex的持久化

vuex

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.

简言之:就是一个状态化管理，能缓存数据，提高性能，它是一个全局的状态，页面能访问到它，有了缓存数据，页面不需要重复的提交数据请求，页面渲染较快，状态一旦改变，可以在devtools里可以查看状态的改变；可以解决一些复杂的非父子通信..

Vuex有五个核心概念：

1.state：vuex的基本数据，用来存储变量
2.getters:可以从store 中的 state 中派生出一些状态，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
3.mutations：提交更新数据s的方法，必须是同步的(如果需要异步使用action)。每个 mutations 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。t
4.actions：和mutations的功能大致相同，不同之处在于

Actions 提交的是 mutations，而不是直接变更状态。
Actions 可以包含任意异步操作。

5.modules：模块化vuex，可以让每一个模块拥有自己的state、mutations、actions、getters,使得结构非常清晰，方便管理。

State

我们可以通过Vue的Computed获得Vuex的state，如下　
vuex中index.js

export default new Vuex.Store({
  state: {
    MvList:[],
    carNum:8,
    Msg:"每天很充实"
  },
  })

在某个组件中获取它的状态

   computed:{
         Msg(){
             return this.$store.state.Msg
         },
        carNum(){
             return this.$store.state.carNum
        }
    }

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用` mapState` 辅助函数帮助我们生成计算属性，让你少按几次键

当然得先引入import {mapState} from 'vuex'

computed:{
     ...mapState(['carNum','Msg',]),
    }

getters

getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略如下例子

const store = new Vuex.Store({ 
state: { count:0 }，
getters: { 
countDouble: function(state){ //一个参数
   return state.count \* 2 
},
countDoubleAndDouble: function(state, getters) {
 return getters.countDouble \* 2
    }
   } 
})

与state一样，我们也可以通过Vue的Computed获得Vuex的getters。

const app = new Vue({
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
})    
}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似
首先得引入import { mapGetters } from 'vuex'

export default { 
  computed: { 
// 使用对象展开运算符将 getters 混入 computed 对象中 
...mapGetters([ 'countDouble', 'CountDoubleAndDouble']) 
}
}

mutations

提交mutation是更改Vuex中的store中的状态的唯一方法。mutation必须是同步的，如果要异步需要使用action。

export default new Vuex.Store({
  state: {
    MvList:[],
    carNum:8,
    Msg:"每天很充实"
  },
  mutations: {
    ChangeCarnum(state){
     state.carNum++
    },
    })

methods:{
    todoChange(){
       this.$store.commit("ChangeCarnum")
    },
 }

mapMutations 辅助函数

与其他辅助函数类似，你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

首先得引入import { mapMutations } from 'vuex'

export default {
  methods: {
     ...mapMutations([ChangeCarnum]),
   // 映射 this.increment() 为this.$store.commit('ChangeCarnum')
 }
}

分发actions

Action 通过 store.dispatch 方法触发store.dispatch('changgeMsgAsync')

   changgeMsgAsync(){     
        this.$store.dispatch("changgeMsgAsync")//派发一个actions           
    },

actions一般做异步操作的

 actions: {
    changgeMsgAsync(){
      axios.get('/vue/mv').then(res=>{
        console.log(res.data.result)
        // this.commit("getMsg",res.data)
        this.commit(getMv,res.data)
      })
    }
  },

mapActions辅助函数

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）:

首先得引入import { mapActions } from 'vuex'

   methods:{
        ...mapActions([
         'changgeMsgAsync'
        ]),
     }

Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。所以模块分割

const module = { 
  state: { ... },
  mutations: { ... },
  actions: { ... }, 
  getters: { ... }
}
export default module

const module = { 
  state: { ... },
  mutations: { ... },
  actions: { ... }, 
  getters: { ... }
  export default module
}

在index.js里引入子store模块文件下的
import city from './moudule/cityMoudle'

  modules: { 
    city
  }

如果在子store里通过开启命名空间 namespaced：true
则可以这样去访问状态：

computed:{
     ...mapState("city",['carNum','Msg',]),
}

各部门需要管理的共享状态都给我管理吧........

vuex里存在长生不老，你知道吗？

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失

因此为了克服这个问题， vuex-persistedstate就出现了

首先下载cnpm i --save vuex-persistedstate
或者npm install vuex-persistedstate --save
在vuex中引入：

import createPersistedState from 'vuex-persistedstate'

在vuex里 new Vue.stroe设置：

const store = new Vuex.Store({
// 存储数据，避免用的缓存数据，刷新会不存在 
plugins:\[createPersistedState({ 
storage:window.localStorage  //默认是  localstorage    reducer(val){ 
//加上这个函数 就是可以限制存储的内容
return{ //之储存state中的
user user:val.user
} 
//默默认是全部储存
} 
})\], 
}）

大概的整理了vuex的一些知识

原文：https://segmentfault.com/a/1190000021886815

链接: https://www.fly63.com/article/detial/8028