vue3 vuex4 中使用ts

黄良钵

分类: 程序开发 2353 0

vuex
// main.ts
import { createApp } from "vue";
import App from "./App.vue";

import store from "./store";

const app = createApp(App);

useAnt(app);
store.forEach(({ modelName, key }) => {
  app.use(modelName, key);
});
.mount("#app");
// store/index.ts
import appStore, { key as appKey } from "./modules/app";
// import userStore, { key as userKey } from "./modules/user";
const modules = [
  {
    modelName: appStore,
    key: appKey
  },
  // {
  //  modelName: userStore,
 //   key: userKey
 // },
];

export default modules;
// store/modules/app.ts
import { InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";

export interface State {
  now: number;
}
export const key: InjectionKey<Store<State>> = Symbol();

export default createStore<State>({
  state: {
    now: Date.now()
  },
  mutations: {
    setNow(state, data: number) {
      state.now = data;
    }
  },
  actions: {}
});

export function appStore() {
  return baseUseStore(key);
}

参考:

1、TypeScript支持

2、https://github.com/vuejs/vuex/issues/1833#issuecomment-736418224

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
ts、typescript、vue4、vuex、vuex4

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “vue3 vuex4 中使用ts”

Loading...