Vue3-Pinia（大菠萝）附源码

文章目录

• Pinia 开源地址
• Pinia 定义与起源
• 优点与特性
• Pinia使用
• • 准备一个小模块(可参考以下程序)
  • 搭建 pinia 环境
  • 存储+读取数据
  • 修改数据(三种方式)
  • storeToRefs
  • getters
  • $subscribe
  • store组合式写法

    更多相关内容可查看

    Pinia 开源地址

    git地址：https://gitee.com/its-a-little-bad/vue.git

    pinia官网地址：https://pinia.vuejs.org/zh/

    node版本：20.8.1

    Pinia 定义与起源

    定义：Pinia 是 Vue 的存储库，允许跨组件/页面共享状态。它实际上可以被视为 Vuex 的升级版，但为了尊重原作者，所以命名为 Pinia 而不是 Vuex。

    起源：Pinia 是 Vue 3 官方推荐的状态管理库，旨在提供一个更加简单和灵活的 API，同时保留 Vuex 的主要功能。

    优点与特性

    • 简化流程：Pinia 抛弃了 Vuex 中的 Mutation，这意味着你可以直接更新状态，无需再注册

      Commit，从而简化了状态管理流程。

    • 支持Vue 2和Vue 3：Pinia 同时支持 Vue 2 和 Vue 3，这使得开发者在迁移项目或同时使用不同版本的 Vue

      时能够更加灵活。

    • TypeScript 支持：Pinia 提供了出色的 TypeScript

      支持，允许开发者在编写代码时获得类型提示和自动补全，提高了代码的质量和可维护性。

    • 灵活的状态组织：与 Vuex 中的模块不同，Pinia 允许开发者自由地组织和管理状态，使得在大型应用中管理状态变得更加灵活和方便。
    • 与 Vue 3 的组合式 API 无缝集成：Pinia 能够与 Vue 3 的组合式 API 无缝集成，使得状态管理代码更加清晰和模块化。
    • 轻量级：Pinia 的体积非常小，只有大约1KB左右，这对于需要优化项目大小的应用程序来说是一个优势。
    • 支持插件：Pinia 支持插件来扩展自身功能，为开发者提供了更多的灵活性和可定制性。

      Pinia使用

      准备一个小模块(可参考以下程序)

          
      当前求和为{{sum}}
            1    2    3    加  减export default {    name:'Count'}import { ref } from 'vue';let sum = ref(0)let n = ref(1)function add(){    sum.value += n.value}function sub(){    sum.value -= n.value}.select,button{    margin:0 5px;    height:40px;}

        获取  

      • {{ talk.title }}
      export default { name:'LoveTalk'}import { idText } from 'typescript';import { reactive } from 'vue';import axios from 'axios';import {nanoid} from 'nanoid'let talkList = reactive([ {id:1,title:'aaa'}, {id:2,title:'bbb'}, {id:3,title:'ccc'},])async function getMseeage(){ let {data:{content:title}} =await axios.get('https://api.uomg.com/api/rand.qinghua?format=json') let obj = {id:nanoid(),title} talkList.unshift(obj)}

      搭建 pinia 环境

      第一步：npm install pinia

      第二步：操作src/main.ts

      import { createApp } from 'vue'import App from './App.vue'/* 引入createPinia，用于创建pinia */import { createPinia } from 'pinia'/* 创建pinia */const pinia = createPinia()const app = createApp(App)/* 使用插件 */{}app.use(pinia)app.mount('#app')

      此时开发者工具中已经有了pinia选项

      存储+读取数据

      1. Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。
      2. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。
      3. 具体编码：src/store/count.ts

      // 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useCountStore = defineStore('count',{  // 动作  actions:{},  // 状态  state(){    return {      sum:6    }  },  // 计算  getters:{}})

      1. 具体编码：src/store/talk.ts

      // 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useTalkStore = defineStore('talk',{  // 动作  actions:{},  // 状态  state(){    return {      talkList:[        {id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},     {id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},        {id:'yuysada03',content:'心里给你留了一块地，我的***心塌地'}      ]    }  },  // 计算  getters:{}})

      1. 组件中使用state中的数据

        
      当前求和为：{{ sumStore.sum }}
        // 引入对应的useXxxxxStore  import {useSumStore} from '@/store/sum'    // 调用useXxxxxStore得到对应的store  const sumStore = useSumStore()

      • {{ talk.content }}
      import axios from 'axios' import {useTalkStore} from '@/store/talk' const talkStore = useTalkStore()

      修改数据(三种方式)

      1. 第一种修改方式，直接修改

      countStore.sum = 666

      1. 第二种修改方式：批量修改

      countStore.$patch({  sum:999,  school:'twl'})

      1. 第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

      import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {  /*************/  actions: {    //加    increment(value:number) {      if (this.sum  1){        this.sum -= value      }    }  },})

      1. 组件中调用action即可

      // 使用countStoreconst countStore = useCountStore()// 调用对应actioncountStore.incrementOdd(n.value)

      storeToRefs

      • 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
      • 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据。

        当前求和为：{{sum}}
          import { useCountStore } from '@/store/count'  /* 引入storeToRefs */  import { storeToRefs } from 'pinia'/* 得到countStore */  const countStore = useCountStore()  /* 使用storeToRefs转换countStore，随后解构 */  const {sum} = storeToRefs(countStore)

        getters

        1. 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。
        2. 追加getters配置。

        // 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useCountStore = defineStore('count',{  // 动作  actions:{    /************/  },  // 状态  state(){    return {      sum:1,      school:'twl'    }  },  // 计算  getters:{    bigSum:(state):number => state.sum *10,    upperSchool():string{      return this. school.toUpperCase()    }  }})

        1. 组件中读取数据：

        const {increment,decrement} = countStorelet {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

        $subscribe

        通过 store 的 $subscribe() 方法侦听 state 及其变化

        talkStore.$subscribe((mutate,state)=>{  console.log('LoveTalk',mutate,state)  localStorage.setItem('talk',JSON.stringify(talkList.value))})

        store组合式写法

        import {defineStore} from 'pinia'import axios from 'axios'import {nanoid} from 'nanoid'import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{  // talkList就是state  const talkList = reactive(    JSON.parse(localStorage.getItem('talkList') as string) || []  )  // getATalk函数相当于action  async function getATalk(){    // 发请求，下面这行的写法是：连续解构赋值+重命名    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')    // 把请求回来的字符串，包装成一个对象    let obj = {id:nanoid(),title}    // 放到数组中    talkList.unshift(obj)  }  return {talkList,getATalk}})