vue+ vuex + ts如何使用modules模块化

在Vue、Vuex和TypeScript中使用modules进行模块化的方式如下：

首先，我们需要安装好Vue和Vuex，并使用TypeScript构建Vue项目。可以通过以下命令进行安装：

npm install vue vuex --save
npm install typescript ts-loader --save-dev

接下来，在根目录下创建`store`目录，并在该目录下创建`index.ts`文件。在`store`目录下再创建`modules`目录，并在该目录下创建对应的模块文件，例如`user.ts`和`product.ts`。

在`user.ts`模块中，定义用户相关的状态、mutations、actions和getters。例如：

// user.ts
const user = {
  state: {
    userInfo: null
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
    }
  },
  actions: {
    setUserInfo({ commit }, userInfo) {
      commit('SET_USER_INFO', userInfo);
    }
  },
  getters: {
    getUserInfo: state => state.userInfo
  }
};

export default user;

在`product.ts`模块中，同样定义商品相关的状态、mutations、actions和getters。

在`index.ts`文件中，引入Vue和Vuex，并创建一个Vuex Store对象，使用`module`方法将模块添加到Store中。例如：

// index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import product from './modules/product';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user,
    product
  }
});

export default store;

最后，在Vue的入口文件（如`main.ts`）中，引入创建的Vuex Store，并将其挂载到Vue实例上。例如：

// main.ts
import Vue from 'vue';
import App from './App.vue';
import store from './store/index';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

现在，我们就可以在组件中使用`this.$store`来访问Vuex的状态、提交mutations、触发actions等。在模块化的情况下，可以使用`this.$store.state.user.userInfo`来访问`user`模块中的`userInfo`状态，使用`this.$store.commit('user/SET_USER_INFO', userInfo)`来提交`user`模块中的`SET_USER_INFO`mutation，使用`this.$store.dispatch('user/setUserInfo', userInfo)`来触发`user`模块中的`setUserInfo`action，以此类推。

通过以上的步骤，我们就可以在Vue、Vuex和TypeScript中使用modules进行模块化管理应用的状态。这样可以使得代码结构更清晰，易于维护和扩展。