作者：Anthony Gore
译者：前端小智
起源：vuejsdevelopers

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

Vuex 是 Vue.js 生态系统中必不可少的工具。然而新接触 Vuex 的开发人员可能会被诸如“状态管理模式”这样的术语所排挤，并且对他们理论须要Vuex的目标感到困惑。

本文算是 Vuex的入门，当然也会 Vuex 的高级概念，并向大家展现如何在应用程序中应用 Vuex。

Vuex 解决的问题

要了解Vuex，首先要了解它要解决的问题。

假如咱们开发了一个多用户聊天利用。界面有用户列表、私人聊天窗口、带有聊天记录的收件箱和告诉栏，告诉用户以后未查看的其余用户的未读音讯。

数以百万计的用户每天通过咱们的利用与数以百万计的其余用户聊天。然而，有人埋怨一个宜人的问题:告诉栏偶然会给出谬误的告诉。用户被告诉有一条新的未读音讯，但当他们查看时，它只是一条曾经被看过的音讯。

该作者所形容的是几年前 Facebook 开发人员在其聊天零碎中遇到的真实情况。 解决这一问题的过程中 开发人员创立名为 "Flux"的应用程序体系结构。 Flux 形成了Vuex，Redux 和其它相似库的根底。

Flux

Facebook开发者为“僵尸告诉”这个问题，苦苦挣扎了一段时间。他们最终意识到，它的持久性不仅仅是一个简略的缺点——它指出了应用程序架构中的一些潜在缺点。

形象中最容易了解该缺点：当应用程序中有多个共享数据的组件时，它们互连的复杂性将减少到无奈预测或了解数据状态的境地。 因而，该应用程序无奈扩大或保护。

Flux 是一个模式，不是一个库。咱们不能去Github下载 Flux。它是一种相似MVC的设计模式。像Vuex和Redux这样的库实现Flux模式的形式与其余框架实现MVC模式的形式雷同。

事实上，Vuex并没有实现Flux的全副，只是一个子集。不过当初不要放心这个问题，咱们关注于了解它所遵循的要害准则。

准则1：繁多起源

组件可能具备仅须要理解的本地数据。 例如，滚动条在用户列表组件中的地位可能与其余组件无关。

然而，要在组件之间共享的任何数据（即应用程序数据）都必须保留在一个独自的地位，与应用它的组件离开。

这个繁多地位称为 "store"。 组件必须从该地位读取应用程序数据，并且不能保留其本人的正本以避免抵触或一致。

import { createStore } from "vuex";// Instantiate our Vuex storeconst store = createStore({  // "State" 组件的应用程序数据    state () {    return {      myValue: 0    };  }});// 组件从其计算的属性拜访 state const MyComponent = {     template: "<div>{{ myValue }}</div>",  computed: {    myValue () {      return store.state.myValue;    }     } };

准则2：数据是只读的

组件能够从store中自在读取数据。 然而不能更改 store 中的数据，至多不能间接更改。

取而代之的是，它们必须告知 store 要更改数据的用意，store由负责通过一组定义的性能（称为mutation）进行更改。

为什么采纳这种办法？ 如果咱们集中数据更改逻辑，那么在状态不统一的状况下，咱们只须要在同一中央排查就行了，不必到具体的每个文件中。 咱们将某些随机组件（可能在第三方模块中）以意外形式更改数据的可能性降至最低。

const store = createStore({   state() {     return {      myValue: 0    };  },   mutations: {     increment (state, value) {       state.myValue += value;    }  } });// 须要更新值吗？// 谬误的，不要间接更改 store 值store.myValue += 10;// 正确的，调用正确的 mutations。store.commit('increment', 10);

准则3：mutation 是同步的

如果应用程序在其体系结构中实现了上述两个准则，那么调试数据不统一就容易得多。能够记录提交并察看状态如何变动(在应用Vue Devtools 时的确能够这样做)。

但如果咱们的mutation被异步调用，这种能力就会被减弱。咱们晓得提交的程序，但咱们不晓得组件提交它们的程序。

同步mutation可确保状态不取决于不可预测事件的程序和工夫。

太酷了，那么 Vuex 到底是什么？

有了所有这些背景常识，咱们终于能够解决这个问题-Vuex 是一个库，可帮忙咱们在Vue应用程序中实现Flux架构。 通过执行上述准则，即便在多个组件之间共享数据时，Vuex 仍可将咱们的应用程序数据放弃在通明且可预测的状态。

当初，咱们曾经对Vuex有了一个高级的理解，咱们看看如何在理论我的项目创立基于Vuex的应用程序。

做一个应用 Vuex to-do-list

为了演示Vuex的用法，咱们设置一个简略的待办应用程序。 大家能够在此处拜访代码的无效示例。

示例地址：https://codesandbox.io/s/happ...

如果大家本人的电脑尝试一波，那么能够应用上面的命令：

vue create vuex-example

装置 Vuex

cd vuex-examplenpm i -S vuex@4npm run serve

创立一个 Vuex store

当初，创立 Vuex store，在我的项目中创立 src/store/index.js：

mkdir src/storetouch src/store/index.js

关上文件并导入createStore办法。此办法用于定义store及其个性。当初，咱们导出该store ，以便在Vue利用中能拜访它。

// src/store/index.jsimport { createStore } from "vuex";export default createStore({});

将 store 增加到 Vue 实例

为了能够从任何组件中拜访 Vuex store，咱们须要在主文件中导入 store 模块，并将store作为插件装置在主Vue实例上

// src/main.jsimport { 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。

// src/components/TodoNew.vue<template>...</template><script>export default {  data() {    return {      task: "",      id: 0    };  },  methods: {    addTodo: function() {      //    }  }};</script>

定义 store 状态

过会，咱们会创立一个显示待办事项的组件。 因为它和TodoNew组件都须要拜访雷同的数据，因而这是咱们在 Vuex 存储中保留的全局state 的现实抉择。

当初，回到state并定义属性状态。 这里应用 Vux4 提供的 createStore 函数，该函数返回一个对象。 该对象具备一个属性 todos，它是一个空数组。

// src/store/index.jsimport { createStore } from "vuex";export default createStore({  state () {    return {      todos: []    }  }});

定义 mutation

从准则2能够晓得，Vuex state 不能间接更改，须要定义mutator函数。

当初，咱们向store增加一个mutation属性，并增加一个函数属性addTodo。 所有mutator办法第一个参数。 第二个可选参数是 store，第二个是传递的数据。

// src/store/index.jsimport { createStore } from "vuex";export default createStore({  state () {    return {      todos: []    }  },  mutations: {    addTodo (state, item) {      state.todos.unshift(item);    }  }});

应用 commit 调用 mutation

当初，能够在TodoNew组件中应用它，在 TodoNew组件定义一个addTodo办法。

要拜访store ，咱们能够应用全局属性this.$store。 应用commit办法创立一个新的mutation。 须要传递了两个参数-首先是mutation的名称，其次是咱们要传递的对象，是一个新的待办事项（由id和task值组成）。

// src/components/TodoNew.vuemethods: {  addTodo: function() {    const { id, task } = this;    this.$store.commit("addTodo", { id, task });    this.id++;    this.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>

读取 store 数据

当初，咱们曾经创立了用于增加待办事项的性能。 接下来，就是把它们显示进去。

创立一个新组件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 store 的内容。

// src/components/TodoList.vue<script>export default {  computed: {    todos() {      //     }  }};</script>

定义 getters

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

例如，上面有getTodos，它返回未过滤的状态。 在许多状况下，能够应用filter或map来转换此内容。

todoCount返回todo数组的长度。

通过确保组件违心保留数据的本地正本，getter有助于实现准则1，即繁多数据起源。

// src/store/index.jsexport 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.vue

要实现此应用程序，当初要做的就是导入并在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>

你真的须要Vuex吗？

显然，在大型应用程序中，领有全局状态治理解决方案将有助于让咱们的应用程序可预测和可保护。

但对于比拟小的我的项目，有时候感觉应用 Vuex 太大材小用了，还这个还是大家跟着理论需要走比拟正当。

Vuex的长处：

  • 易于治理全局状态
  • 弱小的调试全局状态

Vuex的毛病：

  • 额定的我的项目依赖
  • 繁琐的模板

~ 完， 我是刷碗智，刷碗去咯，下期见！

原文：https://vuejsdevelopers.com/2...

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。