vue使用vuex-persistedstate插件时,遇到的问题
这是一个做持久化的插件:vuex-persistedstate我在做项目时,遇到一个问题,就是做下面这个功能,渲染数据的时候,因为这个数据好多个地方使用,所以呢,把它存到了vuex里面。vuex 是将数据存到了浏览器的内存中,刷新就没了这行代码是写在vuex里面的,就是说,我直接从本地去拿数据list: JSON.parse(window.localStorage.getItem('abc')).
·
这是一个做持久化的插件:vuex-persistedstate
我在做项目时,遇到一个问题,就是做下面这个功能,渲染数据的时候,因为这个数据好多个地方使用,所以呢,把它存到了vuex里面。vuex 是将数据存到了浏览器的内存中,刷新就没了
这行代码是写在vuex里面的,就是说,我直接从本地去拿数据
list: JSON.parse(window.localStorage.getItem('abc')).category.list || []
直接看下代码: 我一开始是这样想的,既然我vuex中有数据了,不用计算属性行不行,直接渲染,确实可以渲染,但是品牌这一项咋渲染呢,push行不通啊,那就只能把结构写死,但是页面效果就不对了,所以这个地方用计算属性,第一,动态的取到前两项,第二,可以动态的添加新的 li 结构。
计算属性使用的场景:有数据啦,但不是我想要的格式,要加工加工
setup () {
const brand = reactive({
id: 'brand',
name: '品牌',
children: [{ id: 'brand-children', name: '品牌推荐' }]
})
const store = useStore()
const cateList = computed(() => {
const list = store.state.category.list.map(item => {
return {
id: item.id,
name: item.name,
children: item.children && item.children.slice(0, 2)
}
})
list.push(brand)
return list
})
return { cateList }
}
更多推荐
已为社区贡献7条内容
所有评论(0)