vue3+ts项目搭建(二)添加vuex和配置

1.安装
npm install vuex@next --save

2. 在src目录下新建store文件，新建index.ts作为入口文件

import { createStore } from 'vuex';
// 这里是引入的两个moudle模块
import example from './moudles/example';
import user from './moudles/user';

export default createStore({
    modules: {
        example,
        user
    },
});

3. 在src目录下新家moudles文件夹新建各个moudle模块

   
   
   image.png

新建的moudle

interface UserState {
    name: string;
    age: number;
}

export default {
    namespaced: true,
    state(): UserState {
        return {
            name: '',
            age: 0,
        };
    },
    mutations: {
        setName(state: UserState, name: string) {
            state.name = name;
        },
        setAge(state: UserState, age: number) {
            state.age = age;
        },
    },
    actions: {
        async setName({ commit }: { commit: any }, name: string) {
            commit('setName', name);
        },
        async setAge({ commit }: { commit: any }, age: number) {
            commit('setAge', age);
        },
    },
};

4.在main.ts挂在store

import { createApp } from 'vue';
import router from "./router";
import './style.css';
import App from './App.vue';

import store from './store';

const app: any = createApp(App)
    .use(router)
    .mount('#app'); 

app.use(store);

image.png