子组件主动获取父组件的name值，vue-persist实现不同页面持久化存储数据

开发一个POS系统，做了一个表格组件，可实现表格列的排序，定位，显示隐藏的功能。有点不完美的地方就是，每次我打开页面的时候，没有保存上一次的设置。所以加了个保存的功能，将数据本地存储，实现每个POS机器的配置是不同的。没考虑keep-alive是因为POS的数据是不需要缓存的，如果缓存了还不好处理。vue-persist原理就是localStorage, sessionStorage, localforag。

子组件主动获取父组件的name值

this.$parent.$parent.$options.name

说明：
$parent 层级，确认好你的层级

使用vue-persist

安装

cnpm install --save vuex-persist

引入

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import state from './state'
// 上边是做参考用的，下边 VuexPersistence 才是引入的文件
import VuexPersistence from 'vuex-persist'

挂载

const store = new Vuex.Store({
  state,
  modules,
  getters,
  mutations,
  plugins: [
    new VuexPersistence({
      reducer: state => ({
        tableOption: state.tableOption // 这个就是存入localStorage的值
      })
    }).plugin
  ]
})
export default store

配置 state.js

const state = {
  tableOption: {} // 表格列配置项
}

配置 mutations.js

export default {
  SET_TABLEOPTION: (state, value) => {
    state.tableOption = value
  }
}

说明：
引入以及挂载的文件是在store文件夹下的index.js文件，这个要看你的目录结构设计

完成功能

created() {
    this.optopnListFun()
},
methods: {
    // 表格列配置存储
    locTableOption() {
      const name = this.$parent.$parent.$options.name
      this.$store.commit('SET_TABLEOPTION', Object.assign(this.$store.state.tableOption, { [name]: this.optionList }))
    },
    // 表格列操作
    optopnListFun() {
      // 表格列赋值判断，vuex中有值 就用vuex中的配置过的值； this.list是父组件传过来的默认表格列
      const name = this.$parent.$parent.$options.name
      this.optionList = this.$store.state.tableOption[name] || this.list
      this.locTableOption()
    }
}

结果

实现效果