十四 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.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.use(router)
app.mount('#app')

设置文件store/test7.ts

import {defineStore} from "pinia"const useTest7Srore = defineStore("test7",{actions:{addnum(){if(this.num<=100){this.num+=this.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 lang="ts" setup>import { ref } from 'vue'import useTest7Srore from "@/store/test7.ts"import Test8 from "./Test8.vue"let test7store = useTest7Srore()function addn(){test7store.n = Math.floor(Math.random() * 10) + 1// test7store.num +=test7store.ntest7store.addnum()console.log(test7store.getnum)}
</script><template name="Test7">
<div><div class="main"><div class="div1"><p>num:{{test7store.num}} &nbsp;&nbsp; n:{{test7store.n}}</p><p><button @click="addn" class="btn1">addn</button></p></div><Test8></Test8></div>
</div>    
</template><style 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.num+1。

第二种：批量变更。

test7store.$path({num:1,n:10
})

和第一种的区别是，第一种调用几次则修改几次，$path是一起执行。

第三种：使用actions中自己封装的方法，比如test7store.addnum()。

第三种的优点在于适合处理业务逻辑。

从维护方面，变量修改都写在封装方法里面，可能好维护。

actions中可以使用this，this是当前的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 lang="ts" setup>
import useTest8Srore from "@/store/test8"
import { storeToRefs } from "pinia"let test8Srore = useTest8Srore()
let {list} =  storeToRefs(test8Srore)
//list 是响应式数据</script><template><div><div><p v-for="(value,index)  in list" :key="index">{{value}}</p></div></div>
</template>

就是解构pinia的数据，组件直接使用，数据为响应式。

和toRefs比，仅将暴露数据中的变量变为响应式。

十六 $subscribe

官网：Plugins | Pinia

官网还提到$onAction。

两者都是起到监听作用：

• $subscribe 监听数据变化
• $onAction 监听方法调用

定义参考上述store/test7.ts文件。

调用

<script lang="ts" setup>import { ref } from 'vue'import useTest7Srore from "@/store/test7.ts"import 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)})
</script><template name="Test7">
<div><div class="main"><div class="div1"><p>num:{{test7store.num}} &nbsp;&nbsp; n:{{test7store.n}}</p><p><button @click="addn" class="btn1">addn</button></p></div><Test8></Test8></div>
</div>    
</template><style 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}