Vuex 和其他状态管理库在 Vue.js 中的应用区别

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

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

export default createStore({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build a Vue app', done: false }
    ]
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    toggleTodo(state, id) {
      const todo = state.todos.find(todo => todo.id === id)
      if (todo) {
        todo.done = !todo.done
      }
    }
  },
  actions: {
    addTodoAsync({ commit }, todo) {
      setTimeout(() => {
        commit('addTodo', todo)
      }, 1000)
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

// App.vue
<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} - {{ todo.done ? 'Done' : 'Pending' }}
        <button @click="toggleTodo(todo.id)">Toggle</button>
      </li>
    </ul>
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['todos']),
    ...mapGetters(['doneTodos'])
  },
  methods: {
    ...mapActions(['addTodoAsync']),
    addTodo() {
      const newTodo = { id: Date.now(), text: 'New Todo', done: false }
      this.addTodoAsync(newTodo)
    },
    toggleTodo(id) {
      this.$store.commit('toggleTodo', id)
    }
  }
}
</script>

// store.js
import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: [
      { id: 1, text: 'Learn Pinia', done: true },
      { id: 2, text: 'Build a Vue app', done: false }
    ]
  }),
  actions: {
    addTodo(todo) {
      this.todos.push(todo)
    },
    toggleTodo(id) {
      const todo = this.todos.find(todo => todo.id === id)
      if (todo) {
        todo.done = !todo.done
      }
    }
  },
  getters: {
    doneTodos: (state) => state.todos.filter(todo => todo.done)
  }
})

// App.vue
<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} - {{ todo.done ? 'Done' : 'Pending' }}
        <button @click="toggleTodo(todo.id)">Toggle</button>
      </li>
    </ul>
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script>
import { useTodoStore } from './store'

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

    return {
      todos: store.todos,
      doneTodos: store.doneTodos,
      addTodo: () => {
        const newTodo = { id: Date.now(), text: 'New Todo', done: false }
        store.addTodo(newTodo)
      },
      toggleTodo: (id) => store.toggleTodo(id)
    }
  }
}
</script>

// store.js
import { makeAutoObservable } from 'mobx'

class TodoStore {
  todos = [
    { id: 1, text: 'Learn MobX', done: true },
    { id: 2, text: 'Build a Vue app', done: false }
  ]

  constructor() {
    makeAutoObservable(this)
  }

  addTodo(todo) {
    this.todos.push(todo)
  }

  toggleTodo(id) {
    const todo = this.todos.find(todo => todo.id === id)
    if (todo) {
      todo.done = !todo.done
    }
  }

  get doneTodos() {
    return this.todos.filter(todo => todo.done)
  }
}

export const todoStore = new TodoStore()

// App.vue
<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} - {{ todo.done ? 'Done' : 'Pending' }}
        <button @click="toggleTodo(todo.id)">Toggle</button>
      </li>
    </ul>
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script>
import { todoStore } from './store'
import { observer } from 'mobx-vue'

export default observer({
  data() {
    return {
      store: todoStore
    }
  },
  computed: {
    todos() {
      return this.store.todos
    },
    doneTodos() {
      return this.store.doneTodos
    }
  },
  methods: {
    addTodo() {
      const newTodo = { id: Date.now(), text: 'New Todo', done: false }
      this.store.addTodo(newTodo)
    },
    toggleTodo(id) {
      this.store.toggleTodo(id)
    }
  }
})
</script>