Pinia+Router学习笔记（二）

书接上回，我们已经定义好了一个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>