vue3学习笔记

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

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

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

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里面调用数据，不管父组件还是子组件都可以调用，方法相同。首先导入，导入的对象要加括号

<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--

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里添加事件即可。

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

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之类的

<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

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.调用方法

<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

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里配置

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)