Vuex原理：通过Vuex实现TodoList

什么是Vuex

「Vuex」 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以集中管理应用中的组件共享状态，并提供一些工具来保持状态的一致性。Vuex 主要用于解决以下问题：NiX28资讯网——每日最新资讯28at.com

• 「组件通信」：在大型的 Vue.js 应用中，多个组件可能需要共享一些状态（数据）。而通过简单的组件通信方式（props、自定义事件）在复杂的组件关系中可能会变得不够灵活或繁琐。
• 「状态管理」：Vue.js 的单向数据流通过 props 将数据从父组件传递给子组件，但对于多层嵌套的组件结构，数据流管理可能变得复杂。Vuex 提供了一种集中式管理状态的方式，使得状态的变更变得可预测且易于调试。

以下是 Vuex 的核心概念：NiX28资讯网——每日最新资讯28at.com

1. 「State（状态）」

Vuex 使用一个包含应用层级状态的对象，即 State。这个状态是响应式的，当状态发生变化时，相关组件将自动更新。NiX28资讯网——每日最新资讯28at.com

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

2. 「Mutations（变更）」

状态的变更必须通过 Mutations 来进行。Mutations 是同步函数，用于修改状态。通过这种方式，可以追踪状态的变更，并且可以实现一些限制条件，确保状态的可控性。NiX28资讯网——每日最新资讯28at.com

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

3. 「Actions（动作）」

Actions 是用于提交 Mutations 的函数，可以包含异步操作。通过 Actions，可以更灵活地处理业务逻辑，例如异步请求或条件判断。NiX28资讯网——每日最新资讯28at.com

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

4. 「Getters（获取器）」

Getters 允许组件在访问状态时进行计算，类似于 Vue 组件中的计算属性。Getters 的结果会被缓存，只有依赖的状态发生变化时才会重新计算。NiX28资讯网——每日最新资讯28at.com

const store = new Vuex.Store({  state: {    count: 0  },  getters: {    doubleCount: state => state.count * 2  }});

5. 「Modules（模块）」

Vuex 允许将 Store 分割成模块，每个模块拥有自己的 state、mutations、actions、getters。这样可以更好地组织大型的 Store。NiX28资讯网——每日最新资讯28at.com

const moduleA = {  state: { /* ... */ },  mutations: { /* ... */ },  actions: { /* ... */ },  getters: { /* ... */ }};const store = new Vuex.Store({  modules: {    a: moduleA  }});

6. 单一状态树

Vuex 使用一个单一的状态树来管理应用中的所有状态。这使得整个应用的状态变化可追踪和调试。NiX28资讯网——每日最新资讯28at.com

7. Plugin（插件）

Vuex 允许通过插件扩展其功能。插件是一个函数，可以在每次 mutation 发生时执行一些自定义的逻辑，例如记录日志或持久化存储。NiX28资讯网——每日最新资讯28at.com

// Vuex 插件示例const myPlugin = store => {  // 每次 mutation 时调用  store.subscribe((mutation, state) => {    console.log('mutation type:', mutation.type);  });};

8. 严格模式

Vuex 提供了严格模式，用于检测 State 的变更是否是通过 Mutations 进行的。在开发环境中启用严格模式可以帮助捕获不合规的状态变更。NiX28资讯网——每日最新资讯28at.com

const store = new Vuex.Store({  // ...  strict: process.env.NODE_ENV !== 'production'});

通过这些概念，Vuex 提供了一种集中式状态管理的解决方案，使得状态在应用中的传递和管理更为清晰和可维护。Vuex 不是必需的，尤其对于小型应用可能会显得繁琐，但在大型、复杂的应用中，它提供了一种有组织的方法来管理状态。NiX28资讯网——每日最新资讯28at.com

利用Vuex实现一个tudoList

简单了解一下Vuex之后呢，实现一个小案例。下面是一个使用 Vue 3 和 Vuex 的简单的 Todo List 示例。使用前需要先下载依赖。这个应该都会吧。创建一个 store 文件夹，并在其中创建 index.js 文件来定义 Vuex 的 store：NiX28资讯网——每日最新资讯28at.com

// store/index.jsimport { createStore } from 'vuex';export default createStore({  state: {    todos: []  },  mutations: {    addTodo(state, todo) {      state.todos.push(todo);    },    toggleTodo(state, index) {      state.todos[index].completed = !state.todos[index].completed;    },    removeTodo(state, index) {      state.todos.splice(index, 1);    }  },  actions: {    addTodoAsync({ commit }, todo) {      setTimeout(() => {        commit('addTodo', todo);      }, 1000);    }  },  getters: {    completedTodos: state => state.todos.filter(todo => todo.completed),    remainingTodos: state => state.todos.filter(todo => !todo.completed)  }});

然后在 App.vue 文件中使用这个 store：NiX28资讯网——每日最新资讯28at.com

// App.vue<template>  <div id="app">    <h1>Todo List</h1>    <form @submit.prevent="addTodo">      <input v-model="newTodo" placeholder="Add a new todo" />      <button type="submit">Add</button>    </form>    <div>      <h2>Todo Items</h2>      <ul>        <li v-for="(todo, index) in todos" :key="index">          <input type="checkbox" v-model="todo.completed" />          {{ todo.text }}          <button @click="removeTodo(index)">Remove</button>        </li>      </ul>    </div>    <div>      <h2>Completed Todos</h2>      <ul>        <li v-for="(todo, index) in completedTodos" :key="index">          {{ todo.text }}        </li>      </ul>    </div>    <div>      <h2>Remaining Todos</h2>      <ul>        <li v-for="(todo, index) in remainingTodos" :key="index">          {{ todo.text }}        </li>      </ul>    </div>  </div></template><script>import { computed } from 'vue';import { useStore } from 'vuex';export default {  name: 'App',  data() {    return {      newTodo: ''    };  },  methods: {    addTodo() {      this.$store.commit('addTodo', { text: this.newTodo, completed: false });      this.newTodo = '';    },    removeTodo(index) {      this.$store.commit('removeTodo', index);    }  },  computed: {    todos() {      return this.$store.state.todos;    },    completedTodos: computed(() => useStore().getters.completedTodos),    remainingTodos: computed(() => useStore().getters.remainingTodos)  }};</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  text-align: center;  color: #2c3e50;  margin-top: 60px;}form {  margin-bottom: 20px;}ul {  list-style-type: none;  padding: 0;}li {  margin-bottom: 5px;}</style>

这个示例中，我们使用 Vuex 来管理 todo 列表的状态，包括添加新 todo、切换 todo 状态、删除 todo 等功能。在模板中，我们使用了 v-for 指令来渲染 todo 列表，并通过 Vuex 的 getters 计算属性显示已完成和未完成的 todo 列表。NiX28资讯网——每日最新资讯28at.com

小结

使用vuex能够实现组件之间的通信，它是一个状态管理机制，集中管理组件共享状态。NiX28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-112757-0.htmlVuex原理：通过Vuex实现TodoList

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Uniapp 开发神器，效率翻倍！

下一篇： 高性能、无侵入的 Java 性能监控神器