开发一个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()
}
}
结果
实现效果
