Vue3中使用pinia的示例代碼

更新時間：2022年12月15日 09:54:26 作者：-不要說話-

這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1、安裝：npm install pinia

2、創(chuàng)建store文件并配置內部的index.js文件

import { defineStore } from 'pinia' //引入pinia
 
//這里官網是單獨導出  是可以寫成默認導出的  官方的解釋為大家一起約定倉庫用use打頭的單詞 固定統(tǒng)一小倉庫的名字不易混亂
export const useCar=defineStore("test",{ 
	state: () =>{
		return  ({
			msg:"這是pinia的數(shù)據(jù)",
			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里面的數(shù)據(jù)
        console.log(store.name)
	}
	    
	    
</script>
 
<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

效果圖

點擊按鈕，界面變化

說明成功修改了pinia里面的數(shù)據(jù)，且界面刷新證明這種直接修該pinia數(shù)據(jù)的方式依然是響應式數(shù)據(jù)。

但如果在接收pinia數(shù)據(jù)時，進行解構則不再是響應式數(shù)據(jù)，需要使用toRefs

toRefs

http://t.csdn.cn/hzSqT

4-1、 store.$reset()

將狀態(tài) 重置到其初始值

當我們接收到pinia數(shù)據(jù)且對其數(shù)據(jù)進行了大量修改又想還原時，調用此方法就可以將接收的pinia數(shù)據(jù)全部重置還原

注意：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數(shù)據(jù)
		store.$reset()
	}
	    
	   
</script>
 
<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

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

此時我們點擊reset按鈕，則會重置pinia的所有數(shù)據(jù)

4-2 store.$patch

群體修改，可以將pinia的數(shù)據(jù)進行同一修改

特點：批量修改但狀態(tài)只刷新一次

<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>

點擊fn按鈕后

說明批量修改成功

5.訂閱修改

//可以通過 store 的 $subscribe() 方法查看狀態(tài)及其變化,通過patch修改狀態(tài)時就會觸發(fā)一次
store.$subscribe((mutation, state) => { 
  // 每當它發(fā)生變化時，將整個狀態(tài)持久化到本地存儲
  localStorage.setItem('test', JSON.stringify(state))
})

6.Getter

Getter 完全等同于 Store 狀態(tài)的計算值。它們可以用 defineStore() 中的 getters 屬性定義。他們接收“狀態(tài)”作為第一個參數(shù)以鼓勵箭頭函數(shù)的使用：(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就夠了(它可以異步同步的統(tǒng)一修改狀態(tài))

之所以提供這個功能就是為了項目中的公共修改狀態(tài)的業(yè)務統(tǒng)一

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++//1.有this
    },
    randomizeCounter(state) {//2.有參數(shù)   想用哪個用哪個
      state.counter = Math.round(100 * Math.random())
    },
    randomizeCounter(state) {
        //異步函數(shù)
        axios("/test").then(res=>{
             state.counter = res.data.length
        })
     
    }
  },
})
 
//組件中的使用:
  setup() {
    const store = useStore()
    store.increment()
    store.randomizeCounter()
  }

到此這篇關于Vue3中使用pinia的文章就介紹到這了,更多相關Vue3中使用pinia內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: