书接上回，我们已经定义好了一个store，接下来介绍修改state中值的五种方式
写在前面：在TypeScript中，修改后的值的类型必须和修改之前的值类型相同，否则会报类型错误
第一种：直接修改，简单粗暴
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
// 直接修改Test
Test.current = '我是第一种修改方式'
Test.num = '开始你的炸弹秀' // 报错,提示不能将string类型的值赋给number类型
</script>
<style scoped></style>
第二种：通过$patch方法传入一个对象进行修改（可批量修改）
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
// $patch+对象
Test.$patch({
current: '我是第二种修改方式',
num:888,
})
</script>
<style scoped></style>
注意：通过这种$patch方法+对象的修改方式只会修改传入对象中对应的属性,state中的其他属性不受影响<br />第三种：还是$patch，但是传入一个回调函数(注意带上state参数)，此方法相比对象更加灵活，推荐使用
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
Test.$patch((state) => {
state.current = '我是第三种修改方式'
state.num = 666
})
</script>
<style scoped></style>
第四种：通过Test身上的$state属性直接覆盖整个state，此方法存在一定风险，请谨慎使用
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
Test.$state = {
current: '我是第四种修改方式',
name: '小满娃娃',
num: 5000,
}
</script>
<style scoped></style>
需要注意的是$state中的属性的key和value的类型必须和仓库中的state一致，属性数量也要相同，否则直接报错
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
// 报错,少了name和num属性
Test.$state = {
current: '我是第四种修改方式',
}
</script>
<style scoped></style>
第五种：通过派发action进行修改(需要提前在store的action选项中配置好对应方法)
import { defineStore } from 'pinia'
import { Names } from './store-name'
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
current: '开始你的炸弹秀',
name: '小满zs',
num: 6,
}
},
// computed一些值
getters: {},
// 相当于methods,可以做同步、异步操作、提交state等
actions: {
setCurrent(){
// 别忘了加上this哦~
this.current = '我是第五种修改方式'
}
},
})<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
<button @click="change">派发Action</button>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
const change = () => {
Test.setCurrent()
}
</script>
<style scoped></style>
同样的，setCurrent函数也可以接收参数
import { defineStore } from 'pinia'
import { Names } from './store-name'
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
current: '开始你的炸弹秀',
name: '小满zs',
num: 6,
}
},
// computed一些值
getters: {},
// 相当于methods,可以做同步、异步操作、提交state等
actions: {
setCurrent(str:string){
this.current = str
}
},
})
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
<button @click="change">派发Action</button>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
const change = () => {
Test.setCurrent('只要狗洛在,前端一片光明')
}
</script>
<style scoped></style>
