vue3组合式怎么用vuex存储教师信息，并对教师的薪水进行修改，对教师进行增删

在 Vue 3 中，可以使用组合式 API 和 Vuex 来存储教师信息，并对教师的薪水进行修改，对教师进行增删。具体步骤如下：

1. 在 `store` 中定义教师信息的状态和对应的 `mutation`，例如：

// store.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    teachers: [
      { id: 1, name: '张三', salary: 5000 },
      { id: 2, name: '李四', salary: 6000 },
      { id: 3, name: '王五', salary: 7000 }
    ]
  },
  mutations: {
    updateTeacherSalary(state, payload) {
      const teacher = state.teachers.find(t => t.id === payload.id)
      teacher.salary = payload.salary
    },
    addTeacher(state, teacher) {
      state.teachers.push(teacher)
    },
    deleteTeacher(state, id) {
      const index = state.teachers.findIndex(t => t.id === id)
      state.teachers.splice(index, 1)
    }
  }
})

2. 在组合式 API 中使用 `useStore` 函数获取 `store` 对象，例如：

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    // ...
  }
}

3. 在组件中使用 `computed` 函数获取教师信息的状态，例如：

setup() {
  const store = useStore()
  
  const teachers = computed(() => store.state.teachers)

  return { teachers }
}

4. 在组件中定义修改教师薪水、增加教师和删除教师的方法，并调用对应的 `mutation`，例如：

setup() {
  const store = useStore()
  
  const teachers = computed(() => store.state.teachers)

  const updateTeacherSalary = (id, salary) => {
    store.commit('updateTeacherSalary', { id, salary })
  }

  const addTeacher = (teacher) => {
    store.commit('addTeacher', teacher)
  }

  const deleteTeacher = (id) => {
    store.commit('deleteTeacher', id)
  }

  return { teachers, updateTeacherSalary, addTeacher, deleteTeacher }
}

5. 在模板中使用 `v-for` 循环渲染教师信息，并使用 `v-model` 绑定教师薪水的修改，例如：

<template>
  <div>
    <ul>
      <li v-for="teacher in teachers" :key="teacher.id">
        <span>{{ teacher.name }}</span>
        <span>{{ teacher.salary }}</span>
        <input type="number" v-model="teacher.salary" @change="updateTeacherSalary(teacher.id, teacher.salary)">
        <button @click="deleteTeacher(teacher.id)">删除</button>
      </li>
    </ul>
    <div>
      <input type="text" v-model="newTeacherName">
      <input type="number" v-model="newTeacherSalary">
      <button @click="addTeacher({ id: Date.now(), name: newTeacherName, salary: newTeacherSalary })">添加教师</button>
    </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    const teachers = computed(() => store.state.teachers)

    const updateTeacherSalary = (id, salary) => {
      store.commit('updateTeacherSalary', { id, salary })
    }

    const addTeacher = (teacher) => {
      store.commit('addTeacher', teacher)
      newTeacherName.value = ''
      newTeacherSalary.value = ''
    }

    const deleteTeacher = (id) => {
      store.commit('deleteTeacher', id)
    }

    const newTeacherName = ref('')
    const newTeacherSalary = ref('')

    return { teachers, updateTeacherSalary, addTeacher, deleteTeacher, newTeacherName, newTeacherSalary }
  }
}
</script>

这样，就可以使用 Vuex 来存储教师信息，并对教师的薪水进行修改，对教师进行增删。