vue3学习笔记(pinia)

defineModel:快速实现组件的双向绑定

pinia:在仓库中提供数据和使用数据

创建store文件夹,在里面创建counter.js,以提供数据,注意需要return 和 export,export的是一个函数。

javascript 复制代码
import { defineStore } from "pinia";

import { ref } from 'vue'

//定义store
//defineStore(仓库的唯一标识, () => {...})

export const useCountStore = defineStore('counter', () => {
  //声明数据state
const count = ref(0)
  //声明操作数据的方法action

  //声明基于数据派生的计算属性getters

  //声明数据state = msg
  const msg = ref('weff')

  //使用数据的话需要return

  return{
    count,
    msg
  } 
})

在app.vue里面调用数据,不管父组件还是子组件都可以调用,方法相同。首先导入,导入的对象要加括号

javascript 复制代码
<script setup>

import {useCountStore} from '@/store/counter'

const counterStore = useCountStore()
console.log(counterStore)
</script>

<template>
 <div>

  {{ counterStore.count }}
  {{ counterStore.msg }}

 </div>
</template>

<style scoped>


</style>

pinia:在仓库中声明操作数据的方法action(普通函数)和使用方法

声明操作数据的方法action(普通函数),记得在return里导出

counter.js中

const addCount = () => count.value++

const subCount = () => count.value--

javascript 复制代码
import { defineStore } from "pinia";

import { ref } from 'vue'

//定义store
//defineStore(仓库的唯一标识, () => {...})

export const useCountStore = defineStore('counter', () => {
  //声明数据state
const count = ref(0)
  //声明操作数据的方法action(普通函数)
const addCount = () => count.value++
  const subCount = () => count.value--

  //声明基于数据派生的计算属性getters

  //声明数据state = msg
  const msg = ref('weff')

  //使用数据的话需要return

  return{
    count,
    msg,
    addCount,
    subCount
  } 
})

vue里使用:方法与调用数据大致相同,在vue里添加事件即可。

javascript 复制代码
<script setup>
import {useCountStore} from '@/store/counter'

const counterStore = useCountStore()
</script>

<template>
 <div>
  Son2
  <button @click="counterStore.subCount">-</button>
 </div>
</template>

<style scoped>


</style>

pinia:声明基于数据派生的计算属性getters(computed)与调用

js里声明基于数据派生的计算属性getters(computed)

const double = computed(() => count.value * 2)

javascript 复制代码
import { defineStore } from "pinia";

import { ref } from 'vue'

import { computed } from 'vue'

//定义store
//defineStore(仓库的唯一标识, () => {...})

export const useCountStore = defineStore('counter', () => {
  //声明数据state
const count = ref(0)

  //声明基于数据派生的计算属性getters(computed)
const double = computed(() => count.value * 2)

  //声明数据state = msg
  const msg = ref('weff')

  //使用数据的话需要return

  return{
    count,
    msg,
    double
  } 
})

vue里调用,注:是属性,不是方法,不要绑click之类的

javascript 复制代码
<script setup>
import {useCountStore} from '@/store/counter'
const counterStore = useCountStore()
</script>

<template>
 <div>
  Son1
  <h1>{{counterStore.count}} - {{ counterStore.double }}</h1>


 </div>
</template>

<style scoped>


</style>

pinia:axios异步方法获取接口数据

1.js里先声明异步方法,注意使用async,await,还有return

javascript 复制代码
import { defineStore } from "pinia"
import axios from 'axios'
import {ref}  from 'vue'

export const useChannelStore = defineStore('channel',()=>{
  //声明数据
const channelList = ref([])
  //声明操作数据的方法
const getList = async () => {
//支持异步
const {data:{data}} = await axios.get('http://geek.itheima.net/v1_0/channels')

channelList.value = data.channels

}
 


  return{
    channelList ,getList
  }
})

2.调用方法

javascript 复制代码
<script setup>

import {useCountStore} from '@/store/counter'
import{useChannelStore} from '@/store/channel.js'
const counterStore = useCountStore()
const channelStore = useChannelStore()
console.log(counterStore)
</script>

<template>
 <div>
  <h3>barn</h3>
  {{ counterStore.count }}
  {{ counterStore.msg }}

<button @click="channelStore.getList">获取频道数据</button>
<ul>
  <li v-for="item in channelStore.channelList" :key="item.id">item.name</item></li>
  <li>音乐</li>
</ul>
 </div>
</template>

<style scoped>


</style>

pinia:解构:方法解构无影响,属性解构会失去响应性,需要加方法storeToRefs就不会失去响应性

import { storeToRefs } from 'pinia';

const {getList} = channelStore

const {channelList} = storeToRefs(channelStore)

pinia持久化

配置:main.js

javascript 复制代码
import { createApp } from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'
//导入持久化插件
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()//创建pinia实例
const app = createApp(App)//创建根实例
app.mount('#app')

app.use(pinia.use(persist))

store仓库的js里配置

javascript 复制代码
import { defineStore } from "pinia"

import {ref}  from 'vue'

export const useChannelStore = defineStore('channel',()=>{
  //声明数据
const channelList = ref([])
  //声明操作数据的方法

  return{
    channelList
  }
},{
  persist:{
    key:'hm-counter',
    paths:['count']

  }
})

插件:快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)

相关推荐
excel12 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel13 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙15 小时前
[译] Composition in CSS
前端·css
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix15 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780015 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端15 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧15 小时前
Promise 的使用
前端·javascript