VUE3+pinia的使用
环境是VUE3(vite)+pinia。官方文档:定义 Store | Pinia (vuejs.org)
我首先定义一个store,大概是这样(Setup Store):
import { ref, reactive, computed } from 'vue'
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', () => {
const user = reactive({}),
token = ref(null);
const getUser = computed(() => user.value);
const getToken = computed(() => token.value);
function setUser(data) {
console.log('成功访问action', data);
const arrUserKeys = Object.keys(data.user);
arrUserKeys.forEach(k => {
user = data.user;
});
token.value = data.token;
};
return { user, token, getUser, getToken, setUser };
})
然后我在其他vue中访问这个store。
// 引入
import { useUserStore } from '@/stores/user';
// 定义
const userStore = useUserStore();
// 调用action,没有报错
userStore.setUser({ user: { name: '周星驰', age: '18' }, token: 'abc123' });
// 打印看一下结果,一切正常
console.log('userStore', userStore);
console.log('userStore-name', userStore.user.name);
// 调用getters,报错TypeError: userStore.getUser is not a function
console.log(userStore.getUser());
我的问题:我这样定义和调用store是否正确?为什么无法正确调用getters?
请大佬指教,感谢。
直接用userStore.getUser不要加括号 楼上正解,不要加括号 计算属性的返回值是ref对象,不是方法。去掉括号就可以了
页:
[1]