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)

相关推荐
秋田君12 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人12 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin12 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO12 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545215 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn16 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤17 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523523 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子30 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐31 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui