vue3使用vuex

一、目录结构

 

二、store>index.ts

import {createStore} from "vuex";
import user from "./modules/user";
import getters from "./getters";

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

三、store>getters.ts

const getters = {
    fullName: (state:any) => state.fullName = 123456789,
}

export default getters

四、store>modules>user.ts

const user = {
    state:{
        firstName:'',
        lastName:'',
        fullName:''
    },
    mutations:{
        SET_FULLNAME:(state: any,params: any)=>{
            const {firstName,lastName,suffix} = params;
            if(firstName || lastName || suffix){
                state.fullName = firstName + '_' + lastName + '_' + suffix;
            }
        }
    },
    actions:{
        fullNameActions:(context: any,params: any)=>{
            new Promise((resolve, reject) => {
                setTimeout(()=>{
                    context.commit('SET_FULLNAME',params)
                },1500)
            })
        }
    },
    // getters:{}
}

export default user

五、main.ts

import { createApp } from 'vue'
import App from './App.vue'
import store from "./store"

createApp(App)
.use(store)
.mount('#app')

六、App.vue 

<template>
  <p>VUEX</p>
  <p>getters:{{ store.getters.fullName }}</p>
  <p>{{ store.state.user.fullName }}</p>
  <input type="text" placeholder="请输入姓氏" v-model="user.firstName"><br>
  <input type="text" placeholder="请输入名称" v-model="user.lastName"><br>
  <input type="text" placeholder="请输入后缀" v-model="user.suffix"><br>
  <button @click="edit">修改</button>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';


// 仓库使用
const store = useStore();
// 定义后缀
let user = reactive({
  firstName: '',
  lastName: '',
  suffix: '123'
});

// 修改方法
const edit = () => {
  // 使用vuex 传参后缀 并获取全称
  store.dispatch("fullNameActions", user)
}
</script>

<style lang="scss" scoped>

</style>

七、运行视图