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']
}
})