Vuex

简单了解一下即可，基本用不到这玩意儿。

核心概念

• State: 全局状态数据
• Getters: 计算属性
• Mutations: 同步修改状态（唯一方式）
• Actions: 异步操作，提交 mutations

安装

npm install vuex

创建 Store

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: () => ({
    count: 0,
    todos: []
  }),
  
  getters: {
    doneTodos: state => state.todos.filter(todo => todo.done)
  },
  
  mutations: {
    increment(state) {
      state.count++
    },
    addTodo(state, todo) {
      state.todos.push(todo)
    }
  },
  
  actions: {
    async fetchTodos({ commit }) {
      const todos = await api.getTodos()
      commit('addTodo', todos)
    }
  }
})

在 Vue 应用中使用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

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

组合式 API 中使用 Vuex

<!-- Component.vue -->
<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">+1</button>
    
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
    <button @click="fetchTodos">获取任务</button>
  </div>
</template>

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

const store = useStore()

// 获取状态
const count = computed(() => store.state.count)
const todos = computed(() => store.state.todos)

// 提交 mutation
const increment = () => {
  store.commit('increment')
}

// 分发 action
const fetchTodos = () => {
  store.dispatch('fetchTodos')
}

// 使用 getter
const doneTodos = computed(() => store.getters.doneTodos)
</script>