VUE3----Vuex 4.x 基础版本

main.js

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

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

store/index.js

// 引入Vuex
import {createStore} from 'vuex'

// 准备state---用于存储数据
const state={
    school:{},
    student:{},
}
// 准备mutations---用于操作数据(state)
const mutations={
    setSchool(state,data){
        state.school=data
    },
    setStudent(state,data){
        state.student=data
    }
}
// 准备getters---用于将state中的数据进行加工
const getters={
    gettersAge(state){
        return state.student.age*10
    }
}
// 准备actions---用于响应组件中的动作
const actions={
    setAsynSchool(state,data){
        setTimeout(function () {
            state.commit('setSchool',data)
        },500)
    },
    setAsynStudent(state,data){
        setTimeout(function () {
            state.commit('setStudent',data)
        },500)
    }
}

export default createStore({
    state,
    mutations,
    getters,
    actions
})

student.vue

<template>
  <div>
    <button @click="changeStudent">修改学生信息</button>
    <button @click="changeStudentAsyn">异步修改学生信息</button>
  </div>
</template>

<script>
import {reactive} from "vue";
import {useStore} from "vuex";

export default {
  name: "Student",
  setup(){
    const store=useStore()
    const student=reactive({
      name:'张三',
      age:20
    })
    store.commit('setStudent',student)
    const changeStudent = () => {
      store.commit('setStudent',{
        name:'张三（修改后）',
        age:30
      })
    }
    const changeStudentAsyn = () => {
      store.dispatch('setAsynStudent',{
        name:'张三（修改后，异步）',
        age:10
      })
    }
    return{
      student,
      changeStudent,
      changeStudentAsyn,
    }
  }
}
</script>

school.vue

<template>
  <div>
    <button @click="changeSchool">修改学校信息</button>
    <button @click="changeSchoolAsyn">异步修改学校信息</button>
  </div>
</template>

<script>

import {reactive} from "vue";
import {useStore} from "vuex";

export default {
  name: "School",
  setup(){
    const store=useStore()

    const school=reactive({
      schoolName:'学校',
      level:'一级'
    })
    store.commit('setSchool',school)
    const changeSchool = () => {
      store.commit('setSchool',{
        schoolName:'学校（修改后）',
        level:'一级（修改后）'
      })
    }
    const changeSchoolAsyn = () => {
      store.dispatch('setAsynSchool',{
        schoolName:'学校（修改后，异步）',
        level:'一级（修改后，异步）'
      })
    }
    return{
      school,
      changeSchool,
      changeSchoolAsyn
    }
  }
}
</script>

showInfo.vue

<template>
  <div>
    <h1>学生信息</h1>
    <h2>{{student.name}}===={{student.age}}</h2>
    <h2>学生年龄放大十倍后：{{ageTen}}</h2>
    <hr/>
    <h1>学校信息</h1>
    <h2>{{school.schoolName}}===={{school.level}}</h2>
  </div>
</template>

<script>
import {useStore} from "vuex";
import {computed} from "vue";

export default {
  name: "ShowInfo",
  setup(){
    const store=useStore()
    const school=computed(()=>store.state.school)
    const student=computed(()=>store.state.student)
    const ageTen=computed(()=>store.getters.gettersAge)
    return{
      school,
      student,
      ageTen
    }
  }
}
</script>