当前位置：首页 > news >正文

Vue3 pinia

news 来源：原创 2024/9/20 7:49:39

1.简介

集中式状态（数据）管理

和vueX一样

2.安装pinia

npm i pinia

//引入 createApp用于创建应用
import {createApp} from 'vue';
//引入 App 根组件
import App from './App.vue';//引入pinia
import {createPinia} from 'pinia';//创建一个应用
const app = createApp(App);//创建pinia
const pinia = createPinia();
//安装pinia
app.use(pinia);//挂载整个应用到app容器中
app.mount('#app');

3.存储+读取数据

import {defineStore} from 'pinia';
//hooks命名
//1参数 是id值，最好跟文件名保持一致
export const useCountStore = defineStore('count',{//数据存储的地方state:()=>{return{sum:6}}
})

<template><div class="count"><h2>当前求和为: {{ countStore.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";//用pinia存储数据了，都是跟计算相关的const countStore = useCountStore();//以下两种方式都可以拿到state中的数据
// console.log(countStore.sum);//第一种获取数据的方式
// console.log(countStore.$state.sum);//第二种获取数据的方式//数据
const n = ref(1);function add(){
}function minus(){
}</script><style lang="css" scoped>
.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}
.count * {margin-right: 5px;
}
</style>

4.修改数据

<template><div class="count"><h2>当前求和为: {{ countStore.sum }}</h2><h3>欢迎来到: {{ countStore.school }} 坐落于 {{ countStore.address }}</h3><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";
//引入useCountStore
import { useCountStore } from "@/store/count";//用pinia存储数据了，都是跟计算相关的
//使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore();//以下两种方式都可以拿到state中的数据
// console.log(countStore.sum);//第一种获取数据的方式
// console.log(countStore.$state.sum);//第二种获取数据的方式//数据
const n = ref(1);function add(){//第一种修改方式// countStore.sum+=n.value;//第二种方式批量变更// countStore.$patch({//     sum:100,//     school:'尚硅谷',//     address:'beijing'// })// 第三种 方式countStore.increament(n.value);}function minus(){
}</script><style lang="css" scoped>
.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}
.count * {margin-right: 5px;
}
</style>

import { defineStore } from 'pinia';
//hooks命名
//1参数 是id值，最好跟文件名保持一致
export const useCountStore = defineStore('count', {
//actions 里面放置的是一个一个的方法，用于响应组件中的动作actions: {increament(value){console.log('increament 调用了!',value);console.log(this.sum);//this 是当前的countStorethis.sum+=value}},//数据存储的地方state: () => {return {sum: 6,school: 'atguigu',address: '北京'}}})

5.storeToRefs

<template><div class="count"><h2>当前求和为: {{ sum }}</h2><h3>欢迎来到: {{ school }} 坐落于 {{ address }}</h3><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 { storeToRefs } from "pinia";
//引入useCountStore
import { useCountStore } from "@/store/count";//用pinia存储数据了，都是跟计算相关的
//使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore();
//storeToRefs 只会关注store中的数据，不会对方法进行ref包裹
const {sum,school,address} = storeToRefs(countStore);//将store中的数据映射到当前组件中，然后就可以直接使用//以下两种方式都可以拿到state中的数据
// console.log(countStore.sum);//第一种获取数据的方式
// console.log(countStore.$state.sum);//第二种获取数据的方式//数据
const n = ref(1);function add(){//第一种修改方式// countStore.sum+=n.value;//第二种方式批量变更// countStore.$patch({//     sum:100,//     school:'尚硅谷',//     address:'beijing'// })// 第三种 方式countStore.increament(n.value);}function minus(){countStore.sum-=n.value;
}</script><style lang="css" scoped>
.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}
.count * {margin-right: 5px;
}
</style>

6.getters的使用

相当于pinia的计算属性

import { defineStore } from 'pinia';
//hooks命名
//1参数 是id值，最好跟文件名保持一致
export const useCountStore = defineStore('count', {
//actions 里面放置的是一个一个的方法，用于响应组件中的动作actions: {increament(value:number){console.log('increament 调用了!',value);console.log(this.sum);//this 是当前的countStorethis.sum+=value}},//数据存储的地方state: () => {return {sum: 6,school: 'atguigu',address: '北京'}},getters:{bigsum(){return this.sum*10;},bigschool(store):string{console.log(store);return store.school.toUpperCase();}}})

const {sum,bigschool,address,bigsum} = storeToRefs(countStore);

7.$subscribe

<template><div class="talk"><button @click="getLoveTalk">获取一句土味情话</button><ul><li v-for="item in talkList" :key="item.id">{{ item.talk }}</li></ul></div>
</template><script setup lang="ts" name="LoveTalk">
import { useLoveTalkStore } from "@/store/loveTalk";
import { storeToRefs } from "pinia";
const loveTalkStore = useLoveTalkStore();const { talkList } = storeToRefs(loveTalkStore);loveTalkStore.$subscribe((mutate,state)=>{console.log('talkStore里面保存的数据发生了变化');console.log(mutate);localStorage.setItem('talkList',JSON.stringify(state.talkList))console.log(state);})function getLoveTalk() {loveTalkStore.getTalk();
}
</script><style lang="css" scoped>
.talk {background-color: orange;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}
</style>

import { defineStore } from "pinia";
import axios from "axios";
import { nanoid } from "nanoid";
export const useLoveTalkStore = defineStore('loveTalk', {actions:{async getTalk(){let {data: { content: talk },} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");// talkList.push({//     id:nanoid(),//     talk// })this.talkList.push({id: nanoid(),talk: talk,});}},state: () => {return {talkList: JSON.parse(localStorage.getItem('talkList') as string || '[]')}}
})

8.store组合式写法

import { defineStore } from 'pinia';
//hooks命名
//1参数 是id值，最好跟文件名保持一致
// export const useCountStore = defineStore('count', {
// //actions 里面放置的是一个一个的方法，用于响应组件中的动作
//     actions: {
//         increament(value:number){
//             console.log('increament 调用了!',value);
//            console.log(this.sum);//this 是当前的countStore
//            this.sum+=value//         }
//     }
//     ,
//     //数据存储的地方
//     state: () => {
//         return {
//             sum: 6,
//             school: 'atguigu',
//             address: '北京'
//         }
//     },
//     getters:{
//         bigsum(){
//             return this.sum*10;
//         },
//         bigschool(store):string{
//             console.log(store);//             return store.school.toUpperCase();
//         }
//     }// })import { ref ,computed} from 'vue';
export const useCountStore = defineStore('count',()=> {const sum = ref(0)const school = ref('atguigu')const address = ref('北京')const bigsum = computed(()=>{return sum.value*10;})const bigschool = computed(()=>{return school.value.toUpperCase();})function increament(value:number){console.log('increament 调用了!',value);console.log(sum.value);//this 是当前的countStoresum.value+=value}return {sum,school,address,bigsum,bigschool,increament};})