Vue学习计划-Vue3--核心语法(七)pinia

2024-01-10 09:59:50

pinia案例gitee地址

1. pinia

  1. 准备一个效果
    在这里插入图片描述

  2. 【搭建 pinia 环境】

    1. 安装pinia: npm install pinia/yarn add pinia
    2. 第二步:操作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')
    
    1. 此时开发者工具中已经有了pinia选项
      在这里插入图片描述
3.【存储+读取数据】
  1. Store是一个保存:状态业务逻辑 的实体,每个组件都可以读取写入它。

  2. 它有三个概念:stategetteraction,相当于组件中的: datacomputedmethods

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

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{},
  // 状态
  state(){
    return {
      sum:6
    }
  },
  // 计算
  getters:{}
})
  1. 具体编码:
// 引入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:{}
})
  1. 组件中使用state中的数据:
<template>
  <h2>当前求和为:{{ sumStore.sum }}</h2>
</template>

<script setup lang="ts" name="Count">
  // 引入对应的useXxxxxStore	
  import {useSumStore} from '@/store/sum'
  
  // 调用useXxxxxStore得到对应的store
  const sumStore = useSumStore()
</script>
<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>
4. 【修改数据】(三种方式)
  1. 直接修改
    countStore.sum = 666
  2. 批量修改
countStore.$patch({
  sum:999,
  school:'美丽的学校'
})

3.借助action修改(action中可以编写一些业务逻辑)

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
      }
    }
  },
  /*************/
})
  1. 组件中调用action即可
// 使用countStore
const countStore = useCountStore()

// 调用对应action
countStore.increment(n.value)
5.【storeToRefs】
  • 借助storeToRefsstore中的数据转为ref对象,方便在模板中使用。
  • 注意:pinia提供的storeToRefs只会将数据做转换,而VuetoRefs会转换store中所有数据,效率低。
<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)
  function Add(){
    // 第一种修改数据的方法
    <!-- countStore.sum += n.value -->
    sum.value += n.value
  }
  
</script>
6.【getters】
  1. 概念:当state中的数据,需要经过处理后再使用时,可以使用getters配置。
  2. 追加getters配置。
// 引入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()
    }
  }
})
  1. 组件中读取数据:
const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)
7.【$subscribe】
  • 通过 store 的 $subscribe() 方法侦听 state 及其变化, 类似于watch
talkStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})
8. 【store组合式写法】
import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'

export const useTalkStore = defineStore('talk', () => { // 写成函数形式
  // vue语法,定义响应式数据,talkList就相当于state
  let talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string ) || [])
  // function就相当于actions中的方法
  async function getATalk(){
    // 获取数据, 连续解构 + 重命名
    const {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    let obj = {id: nanoid(),title}
    talkList.unshift(obj)
  }
  // 最后需要return出去
  return { talkList, getATalk }
})

文章来源:https://blog.csdn.net/qq_35940731/article/details/135491334
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。