Vue3和Vue2使用Vuex的区别（使用ts获取更佳体验）

两者核心区别就是类型提示，像定义组件需要 defineComponent 同出一辙：

Vue3

import { createStore } from "vuex";

import example from './modules/example'

export default createStore({
state: {},
mutations: {},
actions: {},
modules: { example }
})
1
2

Vue2

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});
1
2
3

我们以 JavaScript 开发为前提，通过如上对比我们发现为了获取类型提示 Vuex 提供了 createStore() 函数，相当于原来的 Vuex 实例化过程，与 Vue 3 的函数 application 思想一致。

除此之外，modules 写法没有任何变化，在 modules 中，仍需要沿袭以前 Vue 2 的直接导出方法：

// src/store/modules/example/index.js

export default {
state,
mutations,
actions,
// 模块化必须，从而形成 dispath('namespace/action') 作用域
namespaced: true
}
1
2

这就导致了在单个 module 中我们不能获取类型提示，相对乏力，可以考虑使用 TypeScript 改进代码提示问题：

export default {
state,
mutations,
actions,
namespaced: true
} as Module<object, any>
1
2
3
效果：