专门做试卷的网站,吉林省建设安全信息网,wordpress 打赏不能用,txt网站推荐前言
毕竟尤大佬都推荐使用pinia#xff0c;支持vue2和vue3#xff01;
如果熟悉vuex#xff0c;花个把小时把pinia看一下#xff0c;就不想用vuex了
支持选项式api和组合式api写法pinia没有mutations#xff0c;只有#xff1a;state、getters、actionspinia分模块不…
前言
毕竟尤大佬都推荐使用pinia支持vue2和vue3
如果熟悉vuex花个把小时把pinia看一下就不想用vuex了
支持选项式api和组合式api写法pinia没有mutations只有state、getters、actionspinia分模块不需要modulespinia 没有命名空间模块。pinia 无需动态添加底层通过 getCurrentInstance 获取当前 vue 实例进行关联。pinia 是平面结构利于解构没有嵌套可以任意交叉组合。 先介绍两个官网 pinia官网
保持pinia的数据持久化用pinia-plugin-persistedstate 推荐使用这个其他的也可以如pinia-plugin-persist可能会遇到bug pinia-plugin-persistedstate 官网
如果需要对本地存储加密的话使用 secure-ls 插件原理是重构localStorage 和 sessionStorage 的setItem和getItem方法同理vuex里面也可以使用 secure-ls 网址
安装
npm install pinia pinia-plugin-persistedstate创建store
在根目录下创建store文件夹新建index.ts文件 import { createPinia } from pinia;
import createPersistedState from pinia-plugin-persistedstate; //引入pinia数据持久化插件
const pinia createPinia();
pinia.use(createPersistedState);
export default pinia;
挂载 Pinia数据持久化及数据加密
这里使用的pinia数据的持久化和本地加密存储 pinia中不在用modules分模块简单理解一个ts文件一个模块吧注意每个模块尽量统一风格导出变量use开头 下面是个示例 store文件夹中的 counter.ts 这里用到了数据持久化和数据加密
import { defineStore } from pinia; // 定义一个pinia的一个模块
//这里是练习pinia用的
import type { StorageLike } from pinia-plugin-persistedstate;
import SecureLS from secure-ls;
// encryptionSecret:自定义密钥
const ls new SecureLS({isCompression: false,encryptionSecret: 38c31684-d00d-30dc-82e0-fad9eec46d1d,
});
const st: StorageLike {setItem(key: string, value: string) {ls.set(key, value);},getItem(key: string): string | null {return ls.get(key);},
};//第一个参数是id标识pinia的名字第二个参数是个对象
export const useCounterStore defineStore(counter, {state: () {return {count: 10,msg: 菠萝头的使用,price: 100,};},actions: {add() {this.count 1;},del() {this.count - 1;},promiseIncrement() {return new Promise((resolve) {setTimeout(() {this.count;resolve(this.count);}, 1000);});},priceAdd(a: any, b: any) {console.log(a, b);this.price;},},getters: {getCount(state) {//在使用时把方法名当属性用就行return state.count * state.price;},},// persist: true, 默认存储在 localStorage上面的persist: {storage: st, // 上面申明的类型// storage: localStorage,// key: counter,},
});
moduleIdentifiers.ts文件无加密
import { defineStore } from pinia;let moduleIdentifiers: ArrayString [];export const useModuleIdentifiers defineStore(moduleIdentifiers, {state: () {return {moduleIdentifiers,};},actions: {setModuleIdentifiers(aside: ArrayString) {this.moduleIdentifiers aside;},},getters: {},persist: true,// persist: {// storage: localStorage,// },
});
页面中使用
templatea-layout classlayoutHeader /a-layout-content classmain-containera-button clickback返回上一页/a-buttondiv classtitleh1pinia/h1div classbutton-boxa-button typeprimary clicktest去练习vuex/a-buttona-button typeprimary clickchangePina(1)add同步/a-buttona-button typeprimary clickchangePina(2)promise异步/a-buttona-button typeprimary clickchangePina(3)test/a-buttona-button typeprimary clickchangePina(5)$patch/a-buttona-button typeprimary clickchangePina(6)getters/a-buttona-button typeprimary clickchangePina(4)reset/a-button/div/divdiv classcarda-buttonstata.count: {{ count }}/a-buttona-buttonstata.msg: {{ msg }}/a-buttona-buttonstata.price: {{ price }}/a-button/div/a-layout-content/a-layout
/templatescript langts setup
import { reactive, computed } from vue;
import { useRouter } from vue-router;import Header from //components/Header/index.vue;import { useCounterStore } from //store/counter;import { storeToRefs } from pinia;
let pinia useCounterStore();//使用storeToRefs解构保持响应性当然也可以直接结构根据具体情况而定
let { count, price, msg, getCount } storeToRefs(pinia);
// const count computed(() pinia.count)
const changePina (type: number) {if (type 1) {pinia.add();} else if (type 2) {pinia.promiseIncrement();} else if (type 3) {pinia.priceAdd(1, 2);} else if (type 4) {pinia.$reset();} else if (type 5) {pinia.$patch((state) {state.count 2;state.price 2;state.msg $patch批量修改;});} else if (type 6) {console.log(pinia.getCount);//如果想使用解构一定要用 storeRoRefsconsole.log(getCount);}
};
const router useRouter();const test () {router.push(/ncov/test);
};
const back () {router.push(/ncov/task);
};
/scriptstyle langless scoped
.layout {min-width: 1400px;min-height: 100vh;
}.main-container {flex-direction: row;min-height: calc(100vh - 76px);padding: 19px 70px;background-color: bg-color;
}.title {font-weight: 600;font-size: 24px;margin: 30px 0;.flex-type(space-between);:deep(.ant-btn) {margin-left: 10px;}
}.card {background-color: white-color;padding: 30px;:deep(.ant-btn) {margin-left: 10px;}
}.select-box {margin-bottom: 40px;.flex-type(flex-start);:deep(.ant-select) {width: 120px;margin-right: 40px;}
}:deep(.ant-cascader-menu-item:hover) {background: bg-color;
}:deep(.ant-input:focus, .ant-input:hover, .ant-cascader-input:hover) {border-color: rgba(122, 132, 198, 1);
}
/style
详情解析
上面的代码已经包含了 State、Getters、Actions同步/异步、$reset、$patch、 State存数据 Getters计算属性 Actions更改state的值 $reset重置state到最初状态 $patch批量修改state的值 其他还有替换所有state的值等参考官网
