Vue3 pinia

于 2024-08-27 21:17:01 发布
阅读量165 收藏
点赞数 2
分类专栏： Vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53374893/article/details/141610162
版权

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 是当前的countStore
           this.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 是当前的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();
        }
    }

})
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 是当前的countStore
           sum.value+=value
            
        }

        return {sum,school,address,bigsum,bigschool,increament};
    })

荭色海湾
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 pinia详解
CxZzzE的博客
03-20 444
vue3 pinia详解
Vue3中使用pinia_vue3 pinia
2401_84447149的博客
04-29 688
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。
vue3 pinia
weixin_45002586的博客
11-21 421
vue3 pinia
Vue3Pinia
Qiuxuntao的博客
04-01 2058
文章目录一、创建项目二、下载pinia三、配置main .js四、配置store五、在App.vue进行操作修改state里面的数据六、 完整代码七、效果展示 一、创建项目 npm create vite@latest > cd <your-project-name> > npm install > npm run dev 二、下载pinia npm i pinia 三、配置main .js import { createApp } from 'vue' import A
vue3 Pinia使用示例
klylove的博客
07-17 1805
Pinia是Vue的存储库，它允许您跨组件/页面共享状态。如果您熟悉CompositionAPI，您可能会认为您已经可以通过一个简单的exportconststate=reactive({}).这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。.........
vue3pinia使用
qq_56489674的博客
11-29 130
【代码】vue3pinia使用。
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
在uniapp+vue3+pinia的场景下，使用Pinia的持久化插件，可以将store中的数据自动同步到本地存储，当应用重新加载时，可以恢复之前的状态，提高用户体验。需要注意的是，持久化存储应合理处理数据大小限制和用户隐私...
vite+vue3动态模块化导入并使用pinia
03-25
在现代前端开发中，Vue3、Vite和Pinia是三个关键的技术组件，它们共同构建了一个高效、灵活的开发环境。下面将详细讲解这三个技术及其结合使用的方式。 **Vue3** 是Vue.js框架的最新版本，它带来了许多性能优化和新...
Vue3 Pinia
03-14
Vue3 Pinia是一个状态管理库，专门为Vue3设计优化。它提供了一种简单而强大的方式来管理应用程序的状态，并且与Vue3的响应式系统紧密集成。 Pinia的核心概念是store，它类似于传统的Vuex中的module。每个store都...
vue ref和reactive区别
灰海
08-25 1531
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue export的用法
weixin_41203765的博客
08-23 584
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
vue3插件原理
m0_46281382的博客
08-26 742
简述vue3中use方法加载第三方插件原理
knowLedge-无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
2301_76671906的博客
08-23 566
无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
如何使用Vue 3和Type Script进行组件化设计
最新发布
yang295242361的博客
08-27 582
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
vue数据同步（sync修饰符）
weixin_62639453的博客
08-23 427
本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。随便在父组件其他地方绑定一个事件，看看有没有获取到从子组件里面获取到的值，因为要拿选择的值过来父组件这边使用。被执行时，父组件会自动接收到这个事件并更新。
vue.js学习步骤
m0_63178019的博客
08-23 1128
Vue.js 从一个简单的实验性项目成长为一个功能强大、社区活跃的前端框架，其发展历程展示了它对前端开发的持续创新和改进。通过引入先进的功能和不断扩展的生态系统，Vue.js 为开发者提供了一个高效、灵活的工具，满足了不同规模和复杂度应用的需求。
vue全局参数
qq_34631220的博客
08-24 508
其它页面如果想监听改变。
Vue3组件通讯六种方式
yang295242361的博客
08-27 415
Vue3 提供了多种组件通信方式，以满足不同场景下的需求。Props 和 Emits 是最基本的父子组件通信方式；Provide / Inject 适用于跨层级的组件通信；Pinia 是用于全局状态管理的强大工具；attrs和refs 则提供了更灵活的通信方式。开发者可以根据具体需求选择合适的通信方式来实现组件间的数据传递和交互。
Vue JS执行机制和nextTick
YUELEI118的博客
08-25 700
setTimeOut：设置的时间意思是在多久后将此宏任务放到队列中，而不是在队列中等待时间到了才执行await：微任务，在await之后执行的代码，必须等到await执行完毕后才可以执行，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值