北京长空建设有限公司网站,昆明今天刚刚发生的新闻,企业网站推广方法实验报告,网站设计与建设的公司pinia的使用跟vuex很像#xff0c;去除了很多没用的api#xff0c;写法有两种#xff0c;一种老式的选项式api还有一种组合式api#xff0c;用哪种根据自己喜好来#xff0c;以下示例为组合式api
更多教程参考官网#xff1a;pinia官网https://pinia.vuejs.org/zh/
安装…pinia的使用跟vuex很像去除了很多没用的api写法有两种一种老式的选项式api还有一种组合式api用哪种根据自己喜好来以下示例为组合式api
更多教程参考官网pinia官网https://pinia.vuejs.org/zh/
安装
npm install pinia
配置
import { createPinia } from pinia;
import persisted from pinia-plugin-persistedstate;//持久化插件
import App from ./App.vue
const pinia createPinia();
const app createApp(App)
app.use(pinia.use(persisted));//使用pinia以及pinia持久化插件
新建store文件夹index.js
引入defineStore方法穿件一个store主要接收三个参数
参数一store的唯一key值
参数二数据存储区以及方法
参数三持久化配置将数据放缓存持久保存
import {defineStore
} from pinia
import {ref
} from vue// 首页属性
export const usehomeStore defineStore(storeKey, () {let menuState ref(false)//菜单展开状态const testData ref(测试);function changeMenuStateFn() {menuState.value !menuState.value}return {menuState,testData,changeMenuStateFn,}
},
{persist:{enabled:true,//是否开启持久化对象形式不写默认为开启key:menuShowState,//存储时候的key值默认为defineStore的keystorage:sessionStorage,//存储类型默认localStoragepaths:[menuState],//需要持久化的数据默认全部serializer:{deserialize:(){console.log(ooo);},serialize:(){console.log(ppp);},},//序列化方法,默认为JSON.parse与JSON.stringifybeforeRestore: (ctx) {console.log(即将恢复 ${ctx.store.$id})},afterRestore: (ctx) {console.log(刚刚恢复完 ${ctx.store.$id})},}
}
)
页面使用
使用的时候记得使用一下因为向外暴露的是一个方法所以需要调用一下才能获取到值因为在store里面已经使用ref响应过了 所以无需用ref定义直接在页面使用即是响应式数据
注意此处尽量不要解构解构会丢失响应式如果一定要解构请使用storeToRefs,
此方法需要从pinia中导入
使用示例示例来自官网
script setup
import { storeToRefs } from pinia
const store useCounterStore()
// name 和 doubleCount 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } store
/script
import {usehomeStore,usePublic} from /store/index.js
const homeStore usehomeStore();
const publicStore usePublic();
el-aside classaside :widthhomeStore.menuState?60px:200px
