问题记录:Vuex 4 state 在 setup 中 watch 无效

694 阅读1分钟

[Vue warn]: Invalid watch source: 008 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

我的代码大致是这样的

Vuex部分

// store/index.ts
import { createStore } from "vuex";

export default createStore({
  state: { 
    org: "",
  },
  getters: {},
  mutations: { 
    changeOrg(state, playload) {
      state.org = playload;
      console.log(state);
    },
  },
  actions: {},
});

Vue setup 部分

// pages/User/getPermission.ts
import { computed, ref, watch } from "vue";
import { useStore } from "vuex";
import { getPermission } from "../../api/permission";

export default () => {
  const store = useStore();
  const permission = ref([]);

  const orgCode = computed(() => store.state.org);

  const getHavePermission = () => {
    getPermission(orgCode.value)
      .then((res) => {
        if ((res as any)?.code === 200) {
          permission.value = res.data;
        }
      })
      .catch(console.log);
  };

  watch(orgCode.value, getHavePermission);

  return { permission };
};

一直提示我这个错误,纠结了很久,最后发现问题出自

解决

watch(orgCode.value, getHavePermission);

应该为

watch(orgCode, getHavePermission);

没有那个 .value