vite+vuex4.x | hooks - useStore失效解决

今天遇到了个让人?的bug

需求情景

引入vuex - store，使用store.dispatch向action派发任务

  //组ITodo，并dispatch给action
  function setTodo(todoValue: string): void {
    const store: Store<any> = useStore();

    const todo: ITodo = {
      id: new Date().getTime(),
      content: todoValue,
      status: "willdo",
    };

    store.dispatch(SET_TODO, todo);
  }

import

import { Store, useStore } from "vuex";

Error

很明显，此处的store获取失败

且warn提示useStore只能使用在setup()中，无语，该hooks正是引入组件setup中

Solution

既然useStore不能给我带来新鲜的store，那我们就换个思路，自己去拿

修改import

// import { Store, useStore } from "vuex";
import store from "../store/index"; //在实例中引入store才有效，上一行useStore无效，家人们感觉是vite构建的问题

此处使用../store也是可以的

../store/index:

import { createStore } from "vuex";
import actions from "./actions";
import mutations from "./mutations";
import state from "./state";

export default createStore({
  state,
  mutations,
  actions,
});

这里的默认导出，实则可以写成

export const store = createStore(...)

修改引入后的hooks中，我们直接使用store及其方法

  function setTodo(todoValue: string): void {
    // const store: Store<any> = useStore();

    const todo: ITodo = {
      id: new Date().getTime(),
      content: todoValue,
      status: "willdo",
    };

    store.dispatch(SET_TODO, todo);
  }

warn和error消失

问题溯源

查阅网络 + 手动排除，几乎可确定为是vite的原因，该代码（报错版本）在vue-cli + webpack中可正常使用，具体原因，咱没查到，未来深究

扩展

useStore的作用

vuex.vuejs.org/zh/guide/co…

useStore源码分析

function useStore (key) {
    
  if ( key === void 0 ) key = null;

  // 直接通过key获取通过provide保存的store对象
  return inject(key !== null ? key : storeKey)
}

这也解释了为何我们在hooks中使用useStore时会报inject警告