vue3 使用pinia修改值报错 'set' on proxy: trap returned falsish for property

vue yekong

vue3数据大屏 项目开发中,需要设置一个全局年份供各个组件调用,但是在设置后发现无法更新年份排查发现原因是:state 中的字段名和 getters 方法名相同造成的。

修改前

getters: {
        years() {
            var year = dayjs().format("YYYY")
            year = this.years
            return year
        },
    },
    // 相当于 vue中的 methods 既可以写同步代码也可以写异步
    actions: {
        years(years) {
            this.years = years
        }
    }

修改后

import {
    defineStore
} from 'pinia'
import dayjs from "dayjs";

// 创建store,命名规则: useXxxxStore
// 参数1:store的唯一表示
// 参数2:对象,可以提供state actions getters

export const useCounterStore = defineStore('counter', {
    // data里中的数据
    state: () => ({
        year: undefined
    }),
    // 计算属性
    getters: {
        getYear() {
            var year = Number(dayjs().format("YYYY"))
            if (this.year) {
                year = this.year
            }
            return year
        },
    },
    // 相当于 vue中的 methods 既可以写同步代码也可以写异步
    actions: {
        changeYear(years) {
            console.log(years)
            this.year = Number(years)
        }
    }
})

喜欢