版本信息

• "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
    };
  }
});

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

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

  import { useStore } from 'vuex'