vue使用webgl（vue使用pinia (vue2/vue3)）

pinia是什么？Pinia 是 Vue.js 的轻量级状态管理库

官方网站：Pinia

中文文档:   介绍 | Pinia 中文文档

pinia与vuex4

相同

是vue 官方 状态管理工具(作者是 Vue 核心团队成员） 是vue开发者工具支持pinia

不同

pinia相比vuex4    
    
    
，对于vue3的 兼容性 更好 pinia相比vuex4   


     


     


  ，具备完善的 类型推荐  => 对 TS 支持很友好 Pinia

的 API 设计非常接近 Vuex 5 的提案    
    
    
。

  vuex只能有一个根级别的状态,  pinia 直接就可以定义多个根级别状态

pinia核心概念

state: 状态 actions: 修改状态（包括同步和异步



 




 




 
，pinia中没有mutations） getters: 计算属性

一  
    
    
  、使用

1. 安装pinia vue2/vue3 通用

yarn add pinia # 或者使用 npm npm install pinia

2.如果是脚手架的创建的项目可以在安装   

   

   

，会自动创建一个出一个实例    

     

     

 ，帮助你快速引入pinia

vue add vue-cli-plugin-pinia

3.使用 pinia

store/index.js import { defineStore } from pinia // 创建store,命名规则： useXxxxStore // 参数1：store的唯一表示 // 参数2：对象




  




  




  ，可以提供state actions getters export const useCounterStore = defineStore(counter, { // data里中的数据 state: () => ({ count: 1 }), // 计算属性 getters: { double: state => state.count * 2 }, // 相当于 vue中的 methods 既可以写同步代码也可以写异步 actions: { addCount () { this.count++ } } })

vue2:    Home.vue

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <div> pinia中的count值 {{count}}</div> <div>pinia中的计算属性 {{double}}</div> <button @click="addCount">count +1 </button> <button @click="getCount">拿到count的值</button> </div> </template> <script> // @ is an alias to /src import { mapState, mapActions } from pinia import { useCounterStore } from @/store export default { name: Home, computed: { ...mapState(useCounterStore, [count, double]) }, methods: { ...mapActions(useCounterStore, [addCount]), getCount () { console.log(this.count) } } } </script>

vue3 

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <div> pinia中的count值 {{store.count}}</div> <div>pinia中的计算属性 {{store.double}}</div> <button @click="addCount">count +1 </button> <button @click="getCount">拿到count的值</button> </div> </template> <script > import { useCounterStore } from @/store export default { setup () { const store = useCounterStore() const addCount = () => { // 数据+1 store.count++ // 使用$patch 修改数据 好处是可以使用修改多个数据 // store.$patch({ // count: store.count + 1 // }) } return { store, addCount } } } </script>

二

     


     


     
、持久化 vue3/vue2通用

持久化插件：Pinia Plugin Persist

安装命令

npm add pinia-plugin-persist

或

yarn add pinia-plugin-persist

vue2持久化

main.js

import Vue from vue import App from ./App.vue import router from ./router import { createPinia, PiniaVuePlugin } from pinia import VueCompositionAPI from @vue/composition-api // 引入持久化组件 若不想持久化 可不使用 import piniaPersist from pinia-plugin-persist const pinia = createPinia() pinia.use(piniaPersist) Vue.use(PiniaVuePlugin) Vue.use(VueCompositionAPI) Vue.config.productionTip = false new Vue({ router, pinia, render: h => h(App) }).$mount(#app)

store/index.js

import { defineStore } from pinia export const useCounterStore = defineStore(counter, { // data里中的数据 state: () => ({ count: 1 }), persist: { enabled: true, // 开启本地存储 strategies: [ { key: counter1, // 修改当前存储的键名 若不修改则是上面的id storage: localStorage // 修改当前的存储方式  


  


  


，如果不填 则存储方式为sessionstorage } ] } })

vue3持久化

main.js

import Vue from vue import App from ./App.vue import router from ./router import { createPinia, PiniaVuePlugin } from pinia import VueCompositionAPI from @vue/composition-api // 引入持久化组件 若不想持久化 可不使用 import piniaPersist from pinia-plugin-persist const pinia = createPinia() pinia.use(piniaPersist) Vue.use(PiniaVuePlugin) Vue.use(VueCompositionAPI) Vue.config.productionTip = false new Vue({ router, pinia, render: h => h(App) }).$mount(#app)

store/index.js

import { defineStore } from pinia export const useCounterStore = defineStore(counter, { // data里中的数据 state: () => ({ count: 1 }), persist: { enabled: true, // 开启本地存储 strategies: [ { key: counter1, // 修改当前存储的键名 若不修改则是上面的id storage: localStorage // 修改当前的存储方式     
     
     
，如果不填 则存储方式为sessionstorage } ] } })

三 




 




 




、storeToRefs

使用storeToRefs可以保证解构出来的数据也是响应式的   


     


     


  。

在模板中使用数据时




   




   




   ，要加上模块的名字
 



 



 


，例如：

<template> <div> {{counter.count}} </div> </template> <script setup> import { useCounterStore } from @/store const counter = useCounterStore() </script>

如果我们想省略counter 第一个思路 解构

<script setup> import { useCounterStore } from @/store const counter = useCounterStore() const { count } = counter </script>

如果直接从pinia中结构               ，会丢失响应式

storeToRefs

可以保证解构出来的数据也是响应式的



 




 




 
。

const { state属性名1 




    




    




   ， state属性名2 } = storeToRefs(模块名)

使用

<script setup> import { storeToRefs } from pinia import { useCounterStore } from @/store const counter = useCounterStore() const { count } = storeToRefs(counter) </script>

使用storeToRefs可以保证解构出来的数据也是响应式的

四  

   

   

 、pinia模块化

src ├── store │ ├── 模块1.js │   └── 模块2.js ├── pages │   ├── Home.vue │   └── Login.vue └── main.js

在某个.vue中使用模块时














，先import useXXXStore from ./模块, 然后 const xxx = useXXXStore()               ，来使用   

   

   

。如果在导入第二个模块就需要写两次

import { useCounterStore } from @/store/counter import { useCounterUser } from @/store/user const counter = useCounterStore() const counter = useCounterUser()

改进

在复杂项目中  



     



     



   ，不可能把多个模块的数据都定义到一个store中














，一般来说会一个模块对应一个store    
    
    
，最后通过一个根store进行整合

src ├── store │   ├── modules │   │   ├── user.js │   │   └── counter.js │   └── index.js // 根store ├── pages │   └── 页面.vue └── main.js

module/counter.js

import { defineStore } from pinia const useUserStore = defineStore(counter, { state: () => ({ count: 1 }), getters: { double: state => state.count * 2 }, actions: { addCount () { this.count++ } }, persist: { enabled: true } }) export default useUserStore

store/index.js

// 1. 分别导入各个模块 import useCounterStore from ./module/counter import useUserStore from ./module/user // 2. 统一导出useStore方法 export default function useStore () { return { counter: useCounterStore(), user: useUserStore() } }

store/user.js

import { defineStore } from pinia const useUserStore = defineStore(user, { state: () => ({ name: 奥特曼, age: 18 }), getters: { double: state => state.age * 2 }, actions: { editUserName () { this.name = 迪迦 } }, persist: { enabled: true } }) export default useUserStore

注意: 每个文件中的 defineStore(id,{}） 中的id不要重复 否则在index.js 调用时以第一次调用为准

组件中使用

<template> <div> {{count}} {{name}} <button @click="addCount">+1</button> </div> </template> <script setup> import { storeToRefs } from pinia // 导入工具函数 import useStore from @/store // 解构一下 const { counter, user } = useStore() // 使用storeToRefs可以保证解构出来的数据也是响应式的 const { count } = storeToRefs(counter) const { name } = storeToRefs(user) const { addCount } = counter </script>