vuex存取、全局存储、按需存储

vuex 完整代码

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persistedstate';

Vue.use(Vuex)

const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

const store = new Vuex.Store({
  state: {
    projects: ['ASADSADASD'],
    serValue: '你好'
  },
  getters: {
    getAllProjs (state) {
      return state.projects
    },
    getProjectNamesById(state) {
      return state.projects.map(proj => proj.name)
    },
  },
  mutations: {
    pushProjectsToStore(state, data) {
      state.serValue = data
    },
  },
  actions: {
    pushProjectsToStore() {
    }
  },
  //全局存储
  // plugins: [vuexLocal]
  // 按需存取
  plugins: [
    new VuexPersistence({
      reducer: state => ({
        serValue: state.serValue //这个就是存入localStorage的值
      })
    })
  ]

})
export default store

vuex的引入方式

1. 你可以选择将其挂载到Vue的根实例上，如：在main.js中：

2. 当然了，你也可以选择按需引入

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

vuex 存取

取：
根实例上的取法

  console.log(this.$store.state.serValue) // 打印：你好

按需引入的取法

在这里插入代码片

存：

this.$store.commit('pushProjectsToStore',this.data) 
//pushProjectsToStore为你vuex中 mutations的方法
//this.data 为你需要存储的变量，当然你也可以换成字符串

vuex 的全局存储

当你用vuex存储参数到 store 中的时候，刷新页面，store的参数会没得，你需要在存到store的时候再将其存到本地的 localstorage 中,但那样做是不是变得麻烦且容易出错，所以推荐一款插件

vuex-persistedstate

如何使用这个领人愉快的插件呢？

当然第一步，你需要和她在同一个世界（在你的store中引入）：

import createPersistedState from 'vuex-persistedstate';

第二步，就可以选择你是爱她的全部（全局存储），还是爱她的部分（按需存储）

只进入生活的话 你需要这样做

创建一个对象，并进行配置

const vuexLocal = new VuexPersistence({
  storage: window.localStorage  //存储到localStirage里面（默认是存储到这里的）
         //window.sessionStorage 存储到sessionStorage 里面
         //存储到 cookies里
  //storage: {
   //getItem: key => Cookies.get(key),
   //setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
   //removeItem: key => Cookies.remove(key)
 //}
})

只进入身体的话，你需要这样做

 plugins: [
    new VuexPersistence({
      reducer: state => ({
        serValue: state.serValue //这个就是存入localStorage的值
      })
    })
  ]

属性	属性	描述
key	string	将状态存储在存储中的键。默认: ‘vuex’
storage	Storage (Web API)	可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set. 默认是: window.localStorage
saveState	function (key, state[, storage])	如果不使用存储，这个自定义函数将保存状态保存为持久性。
restoreState	function (key[, storage]) => state	如果不使用存储，这个自定义函数处理从存储中检索状态
reducer	function (state) => object	将状态减少到只需要保存的值。默认情况下，保存整个状态。
filter	function (mutation) => boolean	突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。
modules	string[]	要持久化的模块列表。