功能型网站介绍,哪里有做桥梁模型的网站,广州越秀区最新通告,运营什么网站好1、Pinia基本概念 1、Pinia向外暴露了几个重要的函数#xff0c;分别是createPinia、defineStore和storeToRefs 2、pinia有五个核心管理概念#xff1a; store、store、getters、action、plugins 2、Pinia基本使用 1、安装过程 1、安装pinia插件#xff1a;npm install pini…1、Pinia基本概念 1、Pinia向外暴露了几个重要的函数分别是createPinia、defineStore和storeToRefs 2、pinia有五个核心管理概念 store、store、getters、action、plugins 2、Pinia基本使用 1、安装过程 1、安装pinia插件npm install pinia --save//在main。js中引入需要调用createPinia()方法将pinia实例化然后挂载到vue实例上就可以了
2、// 创建pinia状态管理库
import { createPinia } from pinia
const pinia createPinia()app.use(pinia) 2、简单使用。 defineStore函数用来创建生成store对象的函数它接收两个参数第1个参数是store对象的唯一标识必须保证多个不同的store对象的标识是唯一的第2个参数是配置对象基本配置包括state、getters和actions。Pinia要求state配置对象必须是返回state对象的箭头函数getters是包含多个计算属性的对象而actions是包含多个action方法的对象。 2、创建store文件夹并在其中创建index.js文件内容如下需要指定唯一的标识符这里使用useStore作为标识符import { defineStore } from piniaexport const useStore defineStore(main, {state: () ({count: 0}),getters: {doubleCount: (state) state.count * 2},actions: {increment(state) {state.count}}})3、持久化 1、store中的数据刷新页面后就丢失了如果想保留这些数据就要用到数据持久化了。 推荐使用pinia-plugin-persistedstate 2、安装插件 npm install pinia-plugin-persistedstate3、引入持久化插件
在mai.js// 创建pinia状态管理库
import { createPinia } from pinia
import piniaPluginPersistedstate from pinia-plugin-persistedstateconst pinia createPinia()
// 引用插件
pinia.use(piniaPluginPersistedstate) 4、开启持久化数据 最后对要实现状态数据持久化的Pinia模块进行持久化的开启配置比如我们要对计数器模块的count进行持久化处理只需在counter.js文件中添加persist为true的配置即可。 4、举个例子 1、在store中定义一个一个counter.js文件 const useCounterStore defineStore(counter, {state: () ({count: 0,countList: []}),actions: {increment(num) {this.count;this.countList.push(this.count);},decrement(num) {this.count--;this.countList.push(this.count);},reset() {this.count 0;this.countList [];},save() {localStorage.setItem(count, JSON.stringify(this.count));localStorage.setItem(countList, JSON.stringify(this.countList));},},getters: {showCount: (state) state.count,showCountList: (state) state.countList,},persist: true,
});export default useCounterStore;2、在vue组件中使用 template
div{{ store.count }}
/div
div{{store.showCount}}
/divdiv{{store.countList}}/divel-button clickstore.increment/el-buttonel-button clickstore.decrement-/el-buttonel-button clickstore.reset异步/el-button
/template
script setupimport useCounterStore from /storespinia/counter;
const store useCounterStore();/script5、模块汇总化 1、其中pinia中可以自己归类于一个模块可以互相不影响但是也可以通过模块化将相关的模块归集在一起进行模块的处理化 2、新建立一个index.js // 统一导出userstore模块
import useCounterStore from /storespinia/counter.js;
import userStoreLogin from /storespinia/user.js;export default function userStore() {return {counter:useCounterStore(),userLogin:userStoreLogin(),}
} 3、引用模块化 div{{ ddd.count }}
/div
div{{ddd.showCount}}
/divel-button clickddd.increment/el-buttonel-button clickddd.decrement-/el-buttonel-button clickddd.reset异步/el-buttonel-button clickddd.double同步/el-button/template
script setupimport userStore from /storespinia/index;const store userStore();
const ddd store.counter;/script
