Vuex 入门教程

什么是 Vuex？

Vuex 是一个专为 Vue.js 设计的状态管理库。它能以一种可预测的方式管理应用的状态，并使得视图和状态之间的关系更加简单明了。

Vuex 核心概念

State

Vuex 使用单一状态树，即用一个对象包含了全部的应用层级状态。

一个简单的例子：

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

其中 count 就是我们的应用状态，通过 this.$store.state.count 可以访问该状态。

Getter

Getter 可以看做是 store 的计算属性，如果一个状态的值依赖于多个状态，可以用 Getter 来计算。

一个简单的例子：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, task: 'todo1', done: false },
      { id: 2, task: 'todo2', done: true },
      { id: 3, task: 'todo3', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

其中 doneTodos 就是我们的 Getter，通过 this.$store.getters.doneTodos 可以访问该计算属性。

Mutation

Mutation 是改变状态的唯一途径，但它必须是同步的方式，任何异步操作都必须放在 Action 中。

一个简单的例子：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

其中 increment 就是我们的 Mutation，通过 this.$store.commit('increment') 可以调用该 Mutation。

Action

Action 可以看做是对 Mutation 的封装，它可以执行异步操作，并调用多个 Mutation，可以指定异步操作执行成功后调用的 Mutation。

一个简单的例子：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})

其中 increment 就是我们的 Action，通过 this.$store.dispatch('increment') 可以调用该 Action。

Vuex 完整示例

以下是一个完整的 TodoList 应用示例，它包含了 Vuex 的所有核心概念。

<template>
  <div>
    <h1>TodoList</h1>
    <input type="text" v-model="newTodo">
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="todo in filteredTodos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        {{ todo.task }}
      </li>
    </ul>
    <h2>Completed todos</h2>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">
        {{ todo.task }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    filteredTodos () {
      return this.$store.getters.filteredTodos
    },
    doneTodos () {
      return this.$store.getters.doneTodos
    }
  },
  methods: {
    addTodo () {
      this.$store.dispatch('addTodo', this.newTodo)
      this.newTodo = ''
    }
  },
  data () {
    return {
      newTodo: ''
    }
  }
}
</script>

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, task: 'todo1', done: false },
      { id: 2, task: 'todo2', done: true },
      { id: 3, task: 'todo3', done: false }
    ]
  },
  getters: {
    filteredTodos (state) {
      return state.todos.filter(todo => !todo.done)
    },
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    addTodo (state, newTodo) {
      state.todos.push({
        id: state.todos.length + 1,
        task: newTodo,
        done: false
      })
    }
  },
  actions: {
    addTodo (context, newTodo) {
      setTimeout(() => {
        context.commit('addTodo', newTodo)
      }, 1000)
    }
  }
})

在上述示例中，我们使用了 Vuex 来管理 TodoList 应用的状态，包括 todos 列表及其状态，添加 Todo 的方法及其异步操作等。其中 store 包含了我们的状态、getters、mutations 和 actions，通过在 Vue 组件内调用 this.$store.state.xxx，this.$store.getters.xxx 等方法来访问状态。