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)
}
}
})