小说阅读网站怎么建设,怎么创建公众号步骤,网站标签设计,深圳企业网站建设企业十四 pinia
官网#xff1a;安装 | Pinia 中文文档
集中式状态管理#xff0c;与vuex相似#xff0c;提供变量存储便于数据共享。
从概念上类似于php中的session吧……
适用于少量数据的共享#xff0c;可操作数据都是先定义后使用。
适用于判断用户是否登录#xff…十四 pinia
官网安装 | Pinia 中文文档
集中式状态管理与vuex相似提供变量存储便于数据共享。
从概念上类似于php中的session吧……
适用于少量数据的共享可操作数据都是先定义后使用。
适用于判断用户是否登录存储用户信息等。
在组件外使用存储 | Pinia 中文文档
安装
vue2
npm install pinia
npm install vue/composition-api
vue3
npm install pinia
使用
main.js引入pinia
// import ./assets/main.cssimport { createApp } from vue
import App from ./App.vue
import router from ./router
import { createPinia } from piniaconst app createApp(App)
const pinia createPinia()app.use(pinia)
app.use(router)
app.mount(#app)
设置文件store/test7.ts
import {defineStore} from piniaconst useTest7Srore defineStore(test7,{actions:{addnum(){if(this.num100){this.numthis.n}else{console.log(num 100)}}},state:(){return {num:0,n:0}},getters:{getnum:(state){return num: state.num}}
})export default useTest7Srore 引入defineStore定义唯一名称作为第一个参数传递。
state设置存储变量返回对象。
getters设置方法接收变量并处理。
actions设置方法便于处理业务逻辑。
最后向外部暴露。
可以多个逻辑设置多个文件有点像hooks可将重复的业务提取出来减少重复编写。
vue文件调用
script langts setupimport { ref } from vueimport useTest7Srore from /store/test7.tsimport Test8 from ./Test8.vuelet test7store useTest7Srore()function addn(){test7store.n Math.floor(Math.random() * 10) 1// test7store.num test7store.ntest7store.addnum()console.log(test7store.getnum)}
/scripttemplate nameTest7
divdiv classmaindiv classdiv1pnum:{{test7store.num}} nbsp;nbsp; n:{{test7store.n}}/ppbutton clickaddn classbtn1addn/button/p/divTest8/Test8/div
/div
/templatestyle scoped.main{width: 80%;padding: 1em;margin: 0 auto;}.div1{background-image:linear-gradient(#accbee ,#e7f0fd 100%);height: 200px;border-radius: 30px;padding: 1em;}.btn1{height: 30px;background-image:linear-gradient(#1e3c72 ,#2a5298 100%);color: #fff;border: none;border-radius: 5px;}
/style 定义的pinia仓库返回reactive对象也就是例子中test7store是reactive对象。
获取state中的定义变量应该是test7store.$state.num但是reactive对象会对其中定义ref()对象拆包处理所以直接写test7store.num也是对的。
可以调用其中自己封装的方法addnum改变num值或者调用getnum或者num值。
例子中存数据使用test7store.addnum()读数据使用test7store.getnum、test7store.num、test7store.n。
存数据方式
第一种 变量直接操作比如test7store.num1。
第二种批量变更。
test7store.$path({num:1,n:10
})
和第一种的区别是第一种调用几次则修改几次$path是一起执行。
第三种使用actions中自己封装的方法比如test7store.addnum()。
第三种的优点在于适合处理业务逻辑。
从维护方面变量修改都写在封装方法里面可能好维护。
actions中可以使用thisthis是当前的store。
十五 storeToRefs
便于pinia的数据读取可以结构pinia定义的存储库暴露的变量。
官方文档storeToRefs() | Pinia
定义
import {defineStore} from pinia
import { reactive } from vue//组合式
export const useTest8Srore defineStore(test8, (){let list reactive(localStorage.getItem(list)?JSON.parse(localStorage.getItem(list)):[]);//响应式数据function pushlist(info){list.push(info)}return {list,pushlist}
});
export default useTest8Srore
使用
script langts setup
import useTest8Srore from /store/test8
import { storeToRefs } from pinialet test8Srore useTest8Srore()
let {list} storeToRefs(test8Srore)
//list 是响应式数据/scripttemplatedivdivp v-for(value,index) in list :keyindex{{value}}/p/div/div
/template
就是解构pinia的数据组件直接使用数据为响应式。
和toRefs比仅将暴露数据中的变量变为响应式。
十六 $subscribe
官网Plugins | Pinia
官网还提到$onAction。
两者都是起到监听作用
$subscribe 监听数据变化$onAction 监听方法调用
定义参考上述store/test7.ts文件。
调用
script langts setupimport { ref } from vueimport useTest7Srore from /store/test7.tsimport Test8 from ./Test8.vue// let n ref(0)// let num ref(0)let test7store useTest7Srore()function addn(){test7store.n Math.floor(Math.random() * 10) 1// test7store.num test7store.ntest7store.addnum()console.log(test7store.getnum)}test7store.$subscribe((state, getters) {console.log(state)console.log(getters)})test7store.$onAction(({ name, store, after, args, payload }) {console.log(name)console.log(store)console.log(after)console.log(args)console.log(payload)})
/scripttemplate nameTest7
divdiv classmaindiv classdiv1pnum:{{test7store.num}} nbsp;nbsp; n:{{test7store.n}}/ppbutton clickaddn classbtn1addn/button/p/divTest8/Test8/div
/div
/templatestyle scoped.main{width: 80%;padding: 1em;margin: 0 auto;}.div1{background-image:linear-gradient(#accbee ,#e7f0fd 100%);height: 200px;border-radius: 30px;padding: 1em;}.btn1{height: 30px;background-image:linear-gradient(#1e3c72 ,#2a5298 100%);color: #fff;border: none;border-radius: 5px;}
/style
点击addn按钮console输出
//onAction 部分
addnum
Test7.vue:20 Proxy(Object) {$id: test7, $onAction: ƒ, $patch: ƒ, $reset: ƒ, $subscribe: ƒ, …}
Test7.vue:21 ƒ after(callback) {afterCallbackList.push(callback);}
Test7.vue:22 []
Test7.vue:23 undefinedTest7.vue:12 num:3//subscribe 部分
Test7.vue:15 {storeId: test7, type: direct, events: {…}}
Test7.vue:16 Proxy(Object) {num: 3, n: 3}
