Vue3中使用pinia

这篇具有很好参考价值的文章主要介绍了Vue3中使用pinia。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、安装:npm install pinia

2、创建store文件并配置内部的index.js文件

3、main.js文件中配置

4、组件使用

4-1、 store.$reset()  

 4-2 store.$patch

 5.订阅修改

6.Getter

7、Actions


1、安装:npm install pinia

2、创建store文件并配置内部的index.js文件

import { defineStore } from 'pinia' //引入pinia

//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useCar=defineStore("test",{ 
	state: () =>{
		return  ({
			msg:"这是pinia的数据",
			name:"小狮子",
			age:18
			}) //为了避免出错,返回的值用()包起来
	} 
})

3、main.js文件中配置

import { createApp } from 'vue'
import App from './App.vue'

const app=createApp(App)



import { createPinia } from 'pinia' //引入pinia
app.use(createPinia())

app.mount('#app') 

4、组件使用

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<router-view></router-view>
	
</template>

<script setup>
	import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
	let store=useCar() //接收
	 console.log(store)

	let change1=()=>{
		store.name="小羊" //修改pinia里面的数据
        console.log(store.name)
	}
	    
	    
</script>

<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

效果图

Vue3中使用piniaVue3中使用pinia

 点击按钮,界面变化

Vue3中使用piniaVue3中使用pinia

 说明成功修改了pinia里面的数据,且界面刷新证明这种直接修该pinia数据的方式依然是响应式数据。

但如果在接收pinia数据时,进行解构则不再是响应式数据,需要使用toRefs

toRefshttp://t.csdn.cn/pLB5f

4-1、 store.$reset()  

将状态 重置 到其初始值

当我们接收到pinia数据且对其数据进行了大量修改又想还原时,调用此方法就可以将接收的pinia数据全部重置还原

注意:store.$reset() 中的store是自己设定的接收变量,重点是 .$reset()  

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<button @click="reset">reset</button>
	<router-view></router-view>
	
</template>

<script setup>
	import {useCar} from "../store/car.js"
	let store=useCar()
	 console.log(store)
	let change1=()=>{
		store.name="小羊"
		console.log(store.name)
	}
	
	let reset=()=>{ //初始化pinia数据
		store.$reset()
	}
	    
	    
</script>

<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

在之前的案例中修改了pinia的name属性值

Vue3中使用pinia

 此时我们点击reset按钮,则会重置pinia的所有数据

 Vue3中使用pinia

 4-2 store.$patch

群体修改,可以将pinia的数据进行同一修改

特点:批量修改但状态只刷新一次

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<button @click="reset">reset</button>
	<button @click="fn">fn</button>
	<router-view></router-view>
	
</template>

<script setup>
	import {useCar} from "../store/car.js"
	let store=useCar()
	 console.log(store)
	let change1=()=>{
		store.name="小羊"
		console.log(store.name)
	}
	
	let reset=()=>{ //重置
		store.$reset()
	}
	
	function fn(){
		//批量修改
		store.$patch({
		  name:"小羊",
		  age:20,
		})
	}
	    
	    
</script>

<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

 Vue3中使用pinia

 点击fn按钮后

Vue3中使用pinia

说明批量修改成功

 5.订阅修改

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
store.$subscribe((mutation, state) => { 
  // 每当它发生变化时,将整个状态持久化到本地存储
  localStorage.setItem('test', JSON.stringify(state))
})

6.Getter

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用:(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)

//store/index.js文件
export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

//组件中直接使用:  <p>Double count is {{ store.doubleCount }}</p>

7、Actions

在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)

之所以提供这个功能 就是为了项目中的公共修改状态的业务统一文章来源地址https://www.toymoban.com/news/detail-468332.html

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++//1.有this
    },
    randomizeCounter(state) {//2.有参数   想用哪个用哪个
      state.counter = Math.round(100 * Math.random())
    },
    randomizeCounter(state) {
        //异步函数
        axios("/test").then(res=>{
             state.counter = res.data.length
        })
     
    }
  },
})

//组件中的使用:
  setup() {
    const store = useStore()
    store.increment()
    store.randomizeCounter()
  }

到了这里,关于Vue3中使用pinia的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 全局状态管理(简单的store模式、使用Pinia)

    多个组件可能会依赖同一个状态时,我们有必要抽取出组件内的共同状态集中统一管理,存放在一个全局单例中,这样任何位置上的组件都可以访问其中的状态或触发动作 通过自定义一个store模式实现全局的状态管理,实例如下 有两个组件a、b共享store和store2两个状态,我们

    2024年02月13日
    浏览(51)
  • Vue3+Vite+Pinia+Naive项目搭建之二:scss 的安装和使用

    前言 如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门,快速入门。 github 开源库:Vue3-Vite-Pinia-Naive-Js gitee   开源库:Vue3-Vite-Pinia-Naive-Js 1. 安装依赖  2. 新增 src/assets/style/reset.scss 页面样式初始化 3. 新增 src/assets/style/common.scss 共用样式 4. 新增 src/assets/style/utils.scss 工

    2024年02月12日
    浏览(57)
  • vue3中状态管理库pinia的安装和使用方法介绍及和vuex的区别

    Pinia 与 Vuex 一样,是作为 Vue 的“状态存储库”,用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。 当该数据、方法在很多地方都需要

    2024年01月20日
    浏览(44)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第2篇:什么是pinia,1. 创建空Vue项目【附代码文档】

    Pinia 是 Vue 的专属状态管理库,可以实现跨组件或页面共享状态,是 vuex 状态管理工具的替代品,和 Vuex相比,具备以下优势 提供更加简单的API (去掉了 mutation ) 提供符合组合式API风格的API (和 Vue3 新语法统一) 去掉了modules的概念,每一个store都是一个独立的模块 搭配

    2024年03月21日
    浏览(48)
  • vue3+vite+pinia+vue-router+ol项目创建及配置

    vite官网 注意:两种方式创建目录结构一致 方式一:vite创建脚手架命令: 命令行:npm create vite@latest 然后选择 方式二:命令行直接声明带上vue 定义:pinia是一个是Vue官方团队推荐代替Vuex的一款轻量级状态管理库。 pinia官网中文文档 命令行:yarn add pinia 或者 npm i pinia vue-rou

    2024年02月16日
    浏览(86)
  • Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用

    前言 如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门Vue3.0 基础入门快速入门。 UI 组件请参考官网:Naive Ui 官网 为什么选择 naive ui 不继续用 element ui,因为尤大大推荐,可以尝试下,而且 naive ui 更贴近 vue3 的语法,当然易上手还是element ui 好一点。 github 开源库:Vue

    2024年02月07日
    浏览(78)
  • Vue3中使用pinia

    目录 1、安装:npm install pinia 2、创建store文件并配置内部的index.js文件 3、main.js文件中配置 4、组件使用 4-1、 store.$reset()    4-2 store.$patch  5.订阅修改 6.Getter 7、Actions 效果图  点击按钮,界面变化  说明成功修改了pinia里面的数据,且界面刷新证明这种直接修该pinia数据的方式

    2024年02月07日
    浏览(41)
  • vue3探索——pinia高阶使用

    以下是一些 Pinia 的其他高阶功能: storeToRefs() :响应式解构仓库,保证解构出来的数据是响应式的数据。 状态持久化 :Pinia 并没有内置的状态持久化功能,但你可以使用第三方库或自定义插件来实现状态的持久化。例如,你可以使用  localStorage  或  sessionStorage  来将状态

    2024年02月08日
    浏览(34)
  • vue3项目中使用pinia

    前言: 官网地址 https://pinia.vuejs.org/zh/ 中文文档 https://pinia.web3doc.top/ pinia    作为Vue.js 状态管理库 类型安全、可扩展性以及模块化设计。 甚至让你忘记正在使用的是一个状态库。 优点:   优点 dev-tools 支持 跟踪动作、突变的时间线 Store 出现在使用它们的组件中 time travel

    2023年04月26日
    浏览(47)
  • 前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

    ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型; 以下都是 组合式API 的写法, 选项式API 的写法大家可以去官网看看; Pinia; 持久化插件 - pinia-plugin-persistedstate; 目标文件: src/types/user.d.ts (这里以 user.d.t

    2024年04月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包