Vue3中引入Pinia存儲庫使用示例詳解

更新時間：2023年03月27日 11:28:17 作者：HqL丶1024

這篇文章主要介紹了Vue3中引入Pinia存儲庫使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.用自己最喜歡的方式安裝

yarn add pinia
# 或者使用 npm
npm install pinia

2.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')

3.創(chuàng)建store文件并配置內(nèi)部的index.js文件

import { defineStore } from 'pinia' //引入pinia
 
//這里官網(wǎng)是單獨導出  是可以寫成默認導出的  官方的解釋為大家一起約定倉庫用use打頭的單詞 固定統(tǒng)一小倉庫的名字不易混亂
export const useCar=defineStore("test",{ 
    state: () =>{
        return  ({
            msg:"這是pinia",
            name:"小小",
            age:18
            }) //為了避免出錯，返回的值用()包起來
    } 
})

4.組件使用方法

<template>
    <h1>{{store.msg}}{{store.name}}{{store.age}}</h1>
    <button @click="modify">修改store.name</button>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //將之前配置的pinia文件夾中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        modify(){
             store.name = state.testMsg //修改pinia里面的數(shù)據(jù)
             console.log(store.name)
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

5.重置store.$reset()

<template>
    <h1>{{store.msg}}{{store.name}}{{store.age}}</h1>
    <button @click="reset">重置store.name</button>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //將之前配置的pinia文件夾中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        reset(){
             store.$reset() //重置pinia里面的數(shù)據(jù)
             console.log(store.name)
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

6.群體修改store.$patch,可以將pinia的數(shù)據(jù)進行同一修改

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

<template>
    <h1>{{store.msg}}{{store.name}}{{store.age}}</h1>
    <button @click="modify">修改store.name</button>
    <button @click="reset">重置store.name</button>
    <button @click="allModify">群體修改store.name</button>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //將之前配置的pinia文件夾中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        modify(){
             store.name = state.testMsg //修改pinia里面的數(shù)據(jù)
             console.log(store.name)
        },
        reset(){
             store.$reset() //重置pinia里面的數(shù)據(jù)
             console.log(store.name)
        },
        allModify(){
             store.$patch({
              name:"花花",
              age:20,
            })
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

7.訂閱修改

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

8.Getter

Getter 完全等同于 Store 狀態(tài)的計算值。它們可以用 defineStore() 中的 getters 屬性定義。他們接收“狀態(tài)”作為第一個參數(shù)以鼓勵箭頭函數(shù)的使用：(ps:雖然鼓勵但是依然提供了非es6玩家的使用方式內(nèi)部可以用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>

9.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ù).接口成功賦值
     ajax.hplBaseApi("app/productSelection/categoryRows", {}, "post").then((res) => {
        state.counter = res.data.length
     });
    }
  },
})
 
//組件中的使用:
  setup() {
    const store = useStore()
    store.increment()
    store.randomizeCounter()
  }

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

您可能感興趣的文章:

詳解Vue.js 可拖放文本框組件的使用
這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-03-03
Vue之props 配置詳解
這篇文章主要為大家介紹了Vue之props 配置，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助
2021-11-11
el-form的label和表單自適應填滿一行且靠左對齊方式
這篇文章主要介紹了el-form的label和表單自適應填滿一行且靠左對齊方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
VUE3函數(shù)的聲明和使用舉例
這篇文章主要給大家介紹了關于VUE3函數(shù)的聲明和使用的相關資料, Vue3是一種流行的JavaScript框架,它允許開發(fā)人員構(gòu)建現(xiàn)代化的Web應用程序,需要的朋友可以參考下
2023-07-07
Vue+OpenLayer為地圖添加風場效果
這篇文章主要為大家展示了一個demo，即利用Vue和OpenLayer在地圖上面添加風場效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2022-04-04
Vue.js組件使用開發(fā)實例教程
Vue.js的組件可以理解為預先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實例教程的相關資料,需要的朋友可以參考下
2016-11-11
vue.js全局組件和局部組件示例代碼
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個組件,每個組件單獨使用CSS,JS,模板,圖片等資源進行開發(fā)與維護,然后在制作網(wǎng)頁的時候根據(jù)需要調(diào)用相關的組件,這篇文章主要給大家介紹了關于vue.js全局組件和局部組件的相關資料,需要的朋友可以參考下
2022-12-12
vue移動端模態(tài)框(可傳參)的實現(xiàn)
這篇文章主要介紹了vue移動端模態(tài)框(可傳參)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
vue實現(xiàn)微信分享功能
這篇文章主要介為大家詳細紹了vue實現(xiàn)微信分享功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
vue.js圖片轉(zhuǎn)Base64上傳圖片并預覽的實現(xiàn)方法
這篇文章主要介紹了vue.js圖片轉(zhuǎn)Base64上傳圖片并預覽的實現(xiàn)方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08