Vue3 pinia

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量237 收藏
点赞数 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};
    })

荭色海湾
关注
专栏目录
vue3 pinia详解
CxZzzE的博客
03-20 463
vue3 pinia详解
vue3 pinia
weixin_45002586的博客
11-21 439
vue3 pinia
Vue3Pinia
Qiuxuntao的博客
04-01 2094
文章目录一、创建项目二、下载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/组件通信
2301_80480494的博客
07-26 967
概述：自定义事件常用于：子 => 父。注意区分好：原生事件、自定义事件。事件名是特定的（click、mosueenter等等）事件对象$event: 是包含事件相关信息的对象,占位符（pageX、pageY、target、keyCode）事件名是任意名称事件对象$event: 是调用emit时所提供的数据，可以是任意类型命名方式尽量不要驼峰式，而是采取keybab-case式，即send-toy示例：--在父组件中，给子组件绑定自定义事件：-->
vue3 Pinia使用示例
klylove的博客
07-17 1826
Pinia是Vue的存储库，它允许您跨组件/页面共享状态。如果您熟悉CompositionAPI，您可能会认为您已经可以通过一个简单的exportconststate=reactive({}).这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。.........
27 vue3 Pinia取值
本以为成功很简单，没想到活成普通人都需拼尽全力！
03-10 8548
本篇记录使用pinia状态管理工具如何取值的操作 1. 进行vue3的创建 以及 pinia的安装，还不知道的请看上篇文档 目录如下： 2.app.js中写入如下代码 import {defineStore} from "pinia" const appStore = defineStore('appStore', { state: () => ({ baseUrl: 'https://www.baidu.com/', appid: 'wx1..
vue3 pinia本地存储
frdsf123的博客
04-15 658
1.安装pinia和本地存储插件。2.在main中全局配置。
vue3 Pinia详解使用详解
@必意玲
04-11 1601
通过创建数据仓库vuex 中的 state 在 pinia 中可以引用ref和reactive创建响应式数据vuex 中的getters在 pinia 中可以引用computed创建计算属性vuex 中的mutations和actions在 pinia 中就是普通函数, 同步异步都可以。
uni-app Vue3 pinia
qq_15832739的博客
03-13 1814
在根文件中找到miain.js。
vue3 pinia持久化和localStorage加密 两个插件
qq_45617169的博客
07-16 255
【代码】vue3 pinia持久化和localStorage加密。
vite+vue3动态模块化导入并使用pinia
03-25
在现代前端开发中，Vue3、Vite和Pinia是三个关键的技术组件，它们共同构建了一个高效、灵活的开发环境。下面将详细讲解这三个技术及其结合使用的方式。 **Vue3** 是Vue.js框架的最新版本，它带来了许多性能优化和新...
Vue3中使用pinia_vue3 pinia
2401_84447149的博客
04-29 720
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 843
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1195
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 320
Vue根实例、实例总结
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 906
自定义指令
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1179
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
Vue.js组件开发教程
q903249871的博客
09-29 1252
组件是 Vue.js 应用程序的基本构建块。它们是独立且可复用的代码块，可以包含模板、逻辑和样式。提高代码的可维护性实现代码复用使应用结构更加清晰子组件可以通过$emit方法向父组件发送事件。组件是构建 Vue.js 应用程序的基石。通过本教程，您应该对如何创建和使用组件有了基本的了解。继续探索 Vue.js 的组件系统，可以让您的应用更加模块化、可维护和强大。希望这份教程对您有所帮助，祝您在 Vue.js 的学习和开发中取得成功！
Vue3 Pinia
03-14
Vue3 Pinia是一个状态管理库，专门为Vue3设计优化。它提供了一种简单而强大的方式来管理应用程序的状态，并且与Vue3的响应式系统紧密集成。 Pinia的核心概念是store，它类似于传统的Vuex中的module。每个store都包含了一些状态(state)、一些用于修改状态的方法(mutations)以及一些用于获取状态的方法(getters)。与Vuex不同的是，Pinia使用了Vue3的Composition API来定义store，这使得代码更加简洁和可维护。 Pinia还提供了一些额外的特性，例如插件系统、严格模式、热重载等。它还支持异步操作和插件扩展，可以轻松地与其他库和工具集成。 总结一下，Vue3 Pinia是一个简单而强大的状态管理库，它与Vue3的响应式系统紧密集成，提供了一种优雅的方式来管理应用程序的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值