cqwcns 发表于 2023-1-4 10:38

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?
请大佬指教,感谢。



泪鱼无梦 发表于 2023-1-4 10:42

直接用userStore.getUser不要加括号

错的是世界 发表于 2023-1-4 11:12

楼上正解,不要加括号

cx741041875 发表于 2023-1-4 17:04

计算属性的返回值是ref对象,不是方法。去掉括号就可以了
页: [1]
查看完整版本: VUE3+pinia的使用