1.localStorage 特点 能永久存储 不手动删除 或者清理浏览器缓存 就一直在
A页面存储
localStorage.setItem('enterpriseInfo', JSON.stringify(arr))
B页面拿值
const data = JSON.parse(localStorage.getItem('enterpriseInfo'))
2.sessionStorage 特点 只在当前页面有效 关闭浏览器页面时会被清除
A页面存储
sessionStorage.setItem('enterpriseInfo', JSON.stringify(arr))
B页面拿值
const data = JSON.parse(sessionStorage.getItem('enterpriseInfo'))
3.vuex vue全局通信工具
先简单介绍下vuex里面的方法
state: {} 定义数据
mutations: {} 我理解为定义方法的(修改state里面的值)
actions: {} 指派mutations 在里面可以用 commit调用mutations里面的方法
modules: {} // 用于模块化
下面举个例子
假设这个文件是store里面的archive.js 一般每个业务去定义一个存储文件 不要都写在index.js里面
store/index.js里面 import archive from './archive'
state: {
retrievalItem: {},
},
mutations: {
SET_RETRIEVAL_ITEM: (state, data) => { // 这里的state参数就是上面的state
state.retrievalItem = data
},
},
用法1
页面调用时 this.$store.commit('archive/SET_RETRIEVAL_ITEM', arr)
取值直接 this.$store.state.archive.retrievalItem
注意:如果直接是store里面index.js 则不需要加一层archive
直接 this.$store.commit('SET_RETRIEVAL_ITEM', arr)
用法2 页面methods里
methods: {
...mapMutations("archive", [
"SET_RETRIEVAL_ITEM",
]),
}
this.SET_RETRIEVAL_ITEM(arr);
actions: {
updateItem({ commit }, data) {
commit('SET_RETRIEVAL_ITEM', data)
},
}
用法1
页面调用时 this.$store.dispatch('archive/updateItem', arr);
用法2
methods: {
...mapActions("archive", [
"updateItem",
]),
}
this.updateItem(arr);
modules一般在store里面的index.js才有 作用就是模块化的 便于管理不用模块的vuex文件
import archive from './archive'
modules: {
archive
}