vuex useStore() 始终返回undefined

乞力马扎罗的雪哦
  • 7

版本信息

  • "vue": "^3.0.0",
  • "vue-router": "^4.0.0-0",
  • "vuex": "^4.0.0-0"
  • "typescript": "~3.9.3"

问题描述

利用@vue/cli 创建的vue3+ts项目中, 调用 vuex 4提供的useStore()方法,始终返回undefined

这是我的代码

hook 定义
export interface IUseTodo {
    setTodo: (value: string) => void;
}

export function useTodo(): IUseTodo {
    const store: Store<any> = useStore();
    console.log("################",store)
    const setTodo = function (value: string) {
        const todo: ITodo = {
            id: new Date().getTime(),
            content: value,
            status: TODO_STATUS.DOING
        };
        store.dispatch(SET_TODO, todo);
    }
    return {
        setTodo
    }
}
使用hook
export default defineComponent({
  name: "TodoInput",
  components: {},
  setup() {
    const todoVal = ref("");
    const handleSetTodo = () => {
      if (!todoVal.value.trim().length) return;
      const { setTodo } = useTodo();
      setTodo("hello world");
      todoVal.value = "";
    };
    return {
      todoVal,
      handleSetTodo
    };
  }
});
回复
阅读 299
2 个回答

useStore()方法并不是在任何时机下都可以执行,需要保证useStore在setUp 执行时执行

你是不是少了从vuex中引入这个方法?

  import { useStore } from 'vuex'
你知道吗?

宣传栏