快捷導(dǎo)航

Vue3中使用Pinia修改State的五種方式

更新時間：2023年11月15日 15:03:51 作者：xyphf_和派孔明

這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

import { defineStore } from 'pinia';
import { Names } from './store-name';
export const useTestStore = defineStore(Names.Test, {
    state:()=>{
        return {
            current:1111,
            name: '小滿111'
        }
    },
    getters:{ // 類似computed計算屬性 同樣有緩存的
    },
    actions:{ // 類似 methods方法 可以做同步、異步操作 提交state
    }
});

第一種修改State的方式

<template>
    <div>
      pinia: {{ Test.current }} --- {{ Test.name }}
      <button @click="change">change</button>
    </div>
</template>
<script setup lang="ts">
import  {useTestStore} from './store';
const Test = useTestStore();
// 第一種修改State的方式
const change = () => {
   Test.current++
}
</script>
<style scoped>
</style>

第二種修改State的方式

<template>
    <div>
      pinia: {{ Test.current }} --- {{ Test.name }}
      <button @click="change">change</button>
    </div>
</template>
<script setup lang="ts">
import  {useTestStore} from './store';
const Test = useTestStore();
// 第二種修改State的方式 批量修改對象屬性
const change = () => {
  Test.$patch({
    current: 999,
    name: '李四'
  })
}
</script>
<style scoped>
</style>

第三種修改State的方式

<template>
    <div>
      pinia: {{ Test.current }} --- {{ Test.name }}
      <button @click="change">change</button>
    </div>
</template>
<script setup lang="ts">
import  {useTestStore} from './store';
const Test = useTestStore();
// 第三種修改State的方式 向$patch中傳入工廠函數(shù) 可以寫邏輯
const change = () => {
  Test.$patch((state) => { 
    if(state.current>1113){
      state.current--;
      state.name = '羅翔老師';
    } else {
      state.current++;
      state.name = '羅永浩老師';
    }
  })
}
</script>
<style scoped>
</style>

第四種修改State的方式

<template>
    <div>
      pinia: {{ Test.current }} --- {{ Test.name }}
      <button @click="change">change</button>
    </div>
</template>
<script setup lang="ts">
import  {useTestStore} from './store';
const Test = useTestStore();
// 第四種修改State的方式 覆蓋這個state對象
const change = () => {
  Test.$state = {
    current: 1024,
    name: '羅城將軍'
  }
}
</script>
<style scoped>
</style>

第五種修改State的方式

調(diào)用actions里面的方式

在 src/store/index.ts 里面的actions里面寫個方法

import { defineStore } from 'pinia';
import { Names } from './store-name';
export const useTestStore = defineStore(Names.Test, {
    state:()=>{
        return {
            current:1111,
            name: '小滿111'
        }
    },
    getters:{ // 類似computed計算屬性 同樣有緩存的
    },
    actions:{ // 類似 methods方法 可以做同步、異步操作 提交state
        setCurrent(num:number){ // 注意此處不要寫箭頭函數(shù),否則this指向就不對了
            this.current = num;
        }
    }
});

再在組件里面調(diào)用

<template>
    <div>
      pinia: {{ Test.current }} --- {{ Test.name }}
      <button @click="change">change</button>
    </div>
</template>
<script setup lang="ts">
import  {useTestStore} from './store';
const Test = useTestStore();
// 第五種 
const change = () => {
  Test.setCurrent(5173);  // 直接調(diào)用setCurrent函數(shù)
}
</script>
<style scoped>
</style>

到此這篇關(guān)于Vue3中使用Pinia修改State的方法的文章就介紹到這了,更多相關(guān)vue3使用Pinia修改state內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: