Vue3+ts(day07:pinia)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学,可以点心心支持一下哈(笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】,记录一下学习笔记,用于自己复盘,有需要学习的可以去b站学习原版视频)

一、准备一个效果

App组件:

<template>
  <Count></Count>
  <br />
  <LoveTalk></LoveTalk>
</template>

<script setup lang="ts" name="App">
import Count from './components/Count.vue'
import LoveTalk from './components/LoveTalk.vue'
</script>

<style scoped></style>

Count组件:

<template>
  <div class="count">
    <h2>当前求和为:{{ sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
import { ref } from 'vue'
// 数据
let sum = ref(1) //当前求和
let n = ref(1) //用户选择的数据
// 方法
function add () {
  sum.value += n.value
}
function minus () {
  sum.value -= n.value
}
</script>

<style scoped>
.count {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  background-color: skyblue;
}
select,
button {
  margin: 0px 5px;
  height: 25px;
}
</style>

LoveTalk组件:

<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">
        {{ talk.title }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
import { reactive } from 'vue'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { title } from 'process'
// 数据
let talkList = reactive([
  {
    id: 'wad1',
    title: '莫文蔚的阴天,孙燕姿的雨天,周杰伦的晴天,都不如你和我聊天。'
  },
  {
    id: 'wad2',
    title: '“你为什么要害我?”“害你什么?”“害我那么喜欢你!”'
  },
  {
    id: 'wad3',
    title: '你知道你和星星有什么区别吗?星星在天上,你在我心里。'
  }
])
// 方法
async function getLoveTalk () {
  // 发请求
  let result = await axios.get(
    'https://api.uomg.com/api/rand.qinghua?format=json'
  )
  // 把请求回来的字符串,包装成一个对象
  let obj = { id: nanoid(), title: result.data.content }
  talkList.unshift(obj)
}
</script>
<style scoped>
.talk {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  background-color: orange;
}
select,
button {
  margin: 0px 5px;
  height: 25px;
}
</style>

二、搭建 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
import { defineStore } from "pinia";
export const useCountStore = defineStore("count", {
  // 真正存储数据的地方
  state() {
    return {
      sum: 6,
    };
  },
});
  1. 具体编码:src/store/talk.ts
// 引入defineStore用于创建store
import { defineStore } from "pinia";

// 定义并暴露一个store
export const useTalkStore = defineStore("talk", {
  // 动作
  actions: {},
  // 状态
  state() {
    return {
      talkList: [
        {
          id: "wad1",
          title: "莫文蔚的阴天,孙燕姿的雨天,周杰伦的晴天,都不如你和我聊天。",
        },
        {
          id: "wad2",
          title: "“你为什么要害我?”“害你什么?”“害我那么喜欢你!”",
        },
        {
          id: "wad3",
          title: "你知道你和星星有什么区别吗?星星在天上,你在我心里。",
        },
      ],
    };
  },
});
  1. 组件中使用state中的数据
<template>
  <div class="count">
    <h2>当前求和为:{{ sumStore.sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>
<script setup lang="ts" name="Count">
import { ref } from 'vue'
import { useCountStore } from '@/store/count'
// 数据
let sumStore = useCountStore()
let n = ref(1) //用户选择的数据
// 方法
function add () {
  sumStore.sum += n.value
}
function minus () {
  sumStore.sum -= n.value
}
</script>
<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkStore.talkList" :key="talk.id">
        {{ talk.title }}
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts" name="LoveTalk">
import { reactive } from 'vue'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { useTalkStore } from '@/store/talk'
// 数据
let talkStore = useTalkStore()
// 方法
async function getLoveTalk () {
  // 发请求
  let result = await axios.get(
    'https://api.uomg.com/api/rand.qinghua?format=json'
  )
  // 把请求回来的字符串,包装成一个对象
  let obj = { id: nanoid(), title: result.data.content }
  talkStore.talkList.unshift(obj)
}
</script>

四、修改数据(三种方式)

  1. 第一种修改方式,直接修改countStore.sum = 666
  2. 第二种修改方式:批量修改
countStore.$patch({
  sum:999,
  school:'atguigu'
})
  1. 第三种修改方式:借助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.incrementOdd(n.value)

五、storeToRefs

  • 借助storeToRefs将store中的数据转为ref对象,方便在模板中使用。
  • 注意:pinia提供的storeToRefs只会将数据做转换,而Vue的toRefs会转换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)
</script>

六、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)

七、$subscribe(订阅)

通过 store 的 $subscribe() 方法侦听 state 及其变化,类似于watch

mutate:本次修改的信息

state:真正修改的数据

talkStore.$subscribe((mutate, state) => {
  localStorage.setItem('talkList', 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 getLoveTalk() {
    // 发请求,下面这行的写法是:连续解构赋值+重命名
    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, getLoveTalk };
});

  • 8
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值