15.vue状态管理插件

15.1 pinia

• vue3使用的管理插件pinia
• 如果使用了持久化,代码修改后存储无效,记得清空浏览器缓存
• 在vue文件中使用时记得使用computed包裹,确保响应式,通过pinia的存储中定义函数修改值

15.1.1 持久化

• 使用插件pinia-plugin-persistedstate
• 使用持久化选项后将存储ref定义的变量,对应的存储内容在localstorage中

在使用持久化时可能会出现持久化失效的问题,很可能的原因是在pinia还未加载完成时创造了对应实例 比如,在外部ts文件直接使用了存储的变量时可能导致持久化无效

// 尽量不出现此情况,将声明写在函数内,保证函数在实例化完成后执行
const selection = selectionStore()
function getDepartment(value: number) {
    return departmentDict.value[value];
}

15.2 vuex

• vue2使用的管理插件