Vue3第十六天,状态管理工具pinia(一)

在Vue3中我们使用pinia用来做状态管理,也就是我们的数据共享,pinia的图标是一个大菠萝。这个特别容易留下深刻印象,我们就来学习pinia吧!

【准备一个效果】

就是要实现这么一个效果,我们接下来看看如何使用pinia来实现吧!

搭建 pinia 环境

第一步:npm install pinia

第二步:操作src/main.ts

javascript 复制代码
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. 它有三个概念:stategetteraction,相当于组件中的: datacomputedmethods

  3. 具体编码:src/store/count.ts

    javascript 复制代码
    // 引入defineStore用于创建store
    import {defineStore} from 'pinia'
    
    // 定义并暴露一个store
    export const useCountStore = defineStore('count',{
      // 动作
      actions:{},
      // 状态
      state(){
        return {
          sum:6
        }
      },
      // 计算
      getters:{}
    })
  4. 具体编码:src/store/talk.ts

    php 复制代码
    // 引入defineStore用于创建store
    import {defineStore} from 'pinia'
    
    // 定义并暴露一个store
    export const useTalkStore = defineStore('talk',{
      // 动作
      actions:{},
      // 状态
      state(){
        return {
          talkList:[
            {id:'yuysada01',content:'你今天有点怪,哪里怪?怪好看的!'},
                {id:'yuysada02',content:'草莓、蓝莓、蔓越莓,你想我了没?'},
            {id:'yuysada03',content:'心里给你留了一块地,我的死心塌地'}
          ]
        }
      },
      // 计算
      getters:{}
    })
  5. 组件中使用state中的数据

    xml 复制代码
    <template>
      <h2>当前求和为:{{ sumStore.sum }}</h2>
    </template>
    
    <script setup lang="ts" name="Count">
      // 引入对应的useXxxxxStore 
      import {useSumStore} from '@/store/sum'
      
      // 调用useXxxxxStore得到对应的store
      const sumStore = useSumStore()
    </script>
    xml 复制代码
    <template>
        <ul>
        <li v-for="talk in talkStore.talkList" :key="talk.id">
          {{ talk.content }}
        </li>
      </ul>
    </template>
    
    <script setup lang="ts" name="Count">
      import axios from 'axios'
      import {useTalkStore} from '@/store/talk'
    
      const talkStore = useTalkStore()
    </script>

修改数据的三种方式

第一种,直接修改

countStore.sum = 666

第二种,批量修改

bash 复制代码
countStore.$patch({
sum:999,
school:'atguigu'
})

第三种,借助action进行修改。

typescript 复制代码
import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
  /*************/
  actions: {
    //加
    increment(value:number) {
      if (this.sum < 10) {
        //操作countStore中的sum
        this.sum += value
      }
    },
    //减
    decrement(value:number){
      if(this.sum > 1){
        this.sum -= value
      }
    }
  },
  /*************/
})

然后我们在组件中调用action即可。

scss 复制代码
// 使用countStore
const countStore = useCountStore()

// 调用对应action
countStore.incrementOdd(n.value)

说了上面这三种方式,我推荐使用action进行修改,这样可以避免修改起来不方便。

storeToRefs 是什么?

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

也就是说,在组件中我们可以使用toRefspinia中自带的storeToRefs方法来将store中的数据改成响应式,但是我们推荐使用pinia官方推荐的storeToRefs方法。原因是VuetoRefs会将方法和数据都转换成响应式的,然而pinia官方推荐的storeToRefs方法只会转化数据不转换方法。

xml 复制代码
<template>
	<div class="count">
		<h2>当前求和为:{{sum}}</h2>
	</div>
</template>

<script setup lang="ts" name="Count">
  import { useCountStore } from '@/store/count'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'

	/* 得到countStore */
  const countStore = useCountStore()
  /* 使用storeToRefs转换countStore,随后解构 */
  const {sum} = storeToRefs(countStore)
</script>

getters是什么?

  1. 概念:当state中的数据,需要经过处理后再使用时,可以使用getters配置。

  2. 追加getters配置。

    typescript 复制代码
    // 引入defineStore用于创建store
    import {defineStore} from 'pinia'
    
    // 定义并暴露一个store
    export const useCountStore = defineStore('count',{
      // 动作
      actions:{
        /************/
      },
      // 状态
      state(){
        return {
          sum:1,
          school:'atguigu'
        }
      },
      // 计算
      getters:{
        bigSum:(state):number => state.sum *10,
        upperSchool():string{
          return this. school.toUpperCase()
        }
      }
    })
  3. 组件中读取数据:

    bash 复制代码
    const {increment,decrement} = countStore
    let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

$subscribe 可以用来干什么?

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

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

store组合式写法

javascript 复制代码
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}
})

总结一下,这里我们最常用的还是组合式的写法了,为了更好的管理数据,我们要将数据放在useXXX这样的js文件中,方便我们共享数据的统一管理。

感谢大家观看,我们下次见

相关推荐
漂流瓶jz1 天前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码1 天前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v1 天前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
webYin1 天前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip1 天前
结合Worker通知应用更新
前端·javascript
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳1 天前
HTML 基本结构
前端
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐1 天前
Html重绘和重排
前端·html
_Rookie._1 天前
vue3 使用css变量
前端·javascript·html