三、Vue3中使用Pinia修改State的方法

修改Pinia仓库的值有5种方式

src/store/index.ts

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的方式

第二种修改State的方式

第三种修改State的方式

第四种修改State的方式

第五种修改State的方式

调用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){ // 注意此处不要写箭头函数,否则this指向就不对了
            this.current = num;
        }
    }
});

再在组件里面调用