网站建设阶段的推广,福建省亿力电力建设有限公司网站,昆明手机网站开发,衡水建设网站公司安装pinia
在uni-app的Vue3版本中#xff0c;Pinia已被内置#xff0c;无需额外安装即可直接使用#xff08;Vue2版本则内置了Vuex#xff09;。
HBuilder X项目#xff1a;直接使用#xff0c;无需安装。CLI项目#xff1a;需手动安装#xff0c;执行yarn add pinia…安装pinia
在uni-app的Vue3版本中Pinia已被内置无需额外安装即可直接使用Vue2版本则内置了Vuex。
HBuilder X项目直接使用无需安装。CLI项目需手动安装执行yarn add pinia2.0.36或npm install pinia2.0.36。
编辑器环境HBuilderX4.29
安装Pinia持久化插件
npm i pinia-plugin-persistedstate根目录下创建stores文件夹新建index.js文件
import { createPinia } from pinia;
// 引入持久化插件
import persist from pinia-plugin-persistedstate;const pinia createPinia();
// 使用持久化插件
pinia.use(persist);export default pinia;import {usetestStore
} from ./modules/test.js;// 简写
export * from ./modules/test.js;main.js下添加挂载pinia代码
import { createSSRApp } from vue;
import App from ./App;
import pinia from /stores/index.js;export function createApp() {const app createSSRApp(App);app.use(pinia);return {app};
}在stores目录下新建modules文件夹在其下新建test.js测试代码
// /stores/modules/test.js
import { defineStore } from pinia;export const usetestStore defineStore(user, {state: () ({name: John Doe,age: 30}),actions: {updateName(newName) {this.name newName;},incrementAge() {this.age;}},persist: {storage: {// 修改存储方式getItem: uni.getStorageSync,setItem: uni.setStorageSync}}
});在test页面添加如下测试代码测试效果
templateview classcontainertextName: {{ user.name }}/texttextAge: {{ user.age }}/textbutton clickincrementAgeIncrement Age/button/view
/templatescript setupimport {usetestStore} from /stores/modules/test;// 直接使用 useUserStore 钩子函数const user usetestStore();// 定义一个方法来增加年龄和修改姓名const incrementAge () {user.incrementAge();user.name helloWorld;};
/script
style langscss scoped.container {margin-top: 200rpx;}text {margin-left: 20rpx;}
/style启动运行后查看微信小程序test页面可以看到pinia已经持久化保存到缓存里
