Vuex 4 指南，Vue3 必看！

// src/main.js

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

const app = createApp(App);

app.use(store);

app.mount("#app");
 

创建一个简单的应用程序

如上所述，Vuex 的重点是通常在大型应用程序中创建可扩展的全局状态。但是，我们可以在一个简单的应用程序中演示其功能。

完成后效果如下：

现在删除 HelloWorld 文件：

rm src/components/HelloWorld.vue
 

TodoNew.vue

现在添加一个新组件 TodoNew 负责创建新的待办事项。

touch src/components/TodoNew.vue
 

打开 TodoNew.vue 并输入以下内容：

// src/components/TodoNew.vue

<template>
  <form @submit.prevent="addTodo">
    <input
      type="text"
      placeholder="Enter a new task"
      v-model="task"
    />
  </form>
</template>
 

现在转到组件定义，有两个本地状态属性 - task 和 id 为新待办事项提供唯一标识符。

定义存储状态

稍后我们将创建一个显示 Todos 的组件。由于它和 TodoNew 组件访问相同的数据，因此这是我们存储在 Vuex 存储中的全局 state 的理想候选者。

现在，返回state 并定义属性状态。这里我们使用 Vux4 提供的函数createStore，它返回一个对象。该对象有一个属性 todos，它是一个空数组。

// src/store/index.js
import { createStore } from "vuex";

export default createStore({
  state () {
    return {
      todos: []
    }
  }
});
 

定义突变

由原理2可知，Vuex状态不能直接改变，必须定义mutator函数。

现在我们为store添加一个属性，以及一个函数属性addTodo。所有 mutator 方法的第一个参数。第二个可选参数是store，第二个是要传递的数据。

// src/store/index.js

import { createStore } from "vuex";

export default createStore({
  state () {
    return {
      todos: []
    }
  },
  mutations: {
    addTodo (state, item) {
      state.todos.unshift(item);
    }
  }
});
 

使用engage来呼叫mutation

现在，您可以通过在 TodoNew 组件中定义 addTodo 方法来在 TodoNew 组件中使用它。

要访问store，我们可以使用全局属性this.$store。使用 commit 方法创建一个新的 mutation。必须传递两个参数 - 首先是mutation的名称，其次是我们要传递的对象，这是一个新的待办事项（由值id和task组成）。

// src/components/TodoNew.vue
methods: {
  addTodo: function() {
    const { id, task } = this;
    this.$store.commit("addTodo", { id, task });
    this.id++;
    this.task = "";
  }
}
 

回顾task

到目前为止：

1. 用户通过输入框输入待办事项，并绑定到task变量。
2. 提交表单后，调用addTodo方法
3. 创建一个待办事项对象并将其“发送”到store。

// src/components/TodoNew.vue
<template>
  <form @submit.prevent="addTodo">
    <input
      type="text"
      placeholder="Enter a new task"
      v-model="task"
    />
  </form>
</template>
<script>
export default {
  data() {
    return {
      task: "",
      id: 0
    };
  },
  methods: {
    addTodo: function() {
      const { id, task } = this;
      this.$store.commit("addTodo", { id, task });
      this.id++;
      this.task = "";
    }
  }
};
</script>
 

读取存储数据

现在我们已经创建了做事情的功能。下一步是向他们展示。

创建一个新组件 TodoList.vue 文件。

touch src/components/TodoList.vue
 

读作如下：

// src/components/TodoList.vue
<template>
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.description }}
  </li>
</ul>
</template>
 

todos 是一个计算属性，我们在其中返回 Vuex 存储的内容。

// src/components/TodoList.vue

<script>
export default {
  computed: {
    todos() {
      // 
    }
  }
};
</script>
 

定义吸气剂

与直接访问store的内容相比，getter是一个类似于存储的计算属性的函数。这些工具非常适合在将数据返回到应用程序之前过滤或转换数据。

例如，下面是getTodos，它返回未过滤的状态。在许多情况下，此内容可以转换为 filter 或 map。

todoCount 返回 todo 数组的长度。

通过确保组件愿意保留数据的本地副本，getter 有助于原则 1，单一事实来源。

// src/store/index.js

export default createStore({
  ...
  getters: {
    getTodos (state) {
      return state.todos;
    },
    todoCount (state) {
      return state.todos.length;
    }
  }
})
 

返回组件TodoList，我们通过返回this.$store.getters.getTodos来完成函数。

// src/components/TodoList.vue

<script>
export default {
  computed: {
    todos() {
      return this.$store.getters.getTodos;
    }
  }
};
</script>
 

App.vuestore

要完成此应用程序，我们现在需要做的就是在App.vue中导入并声明我们的组件。

// src/App.vue

<template>
  <div>
    <h1>To-Do List</h1>
    <div>
      <TodoNew />
      <TodoList />
    </div>
  </div>
</template>
<script>
import TodoNew from "@/components/TodoNew.vue";
import TodoList from "@/components/TodoList.vue";

export default {
  components: {
    TodoNew,
    TodoList
  }
};
</script>