关于html5:Vuex-4-指南使用-Vue3-的需要看看

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

import {createStore} from "vuex";

// Instantiate our Vuex store
const store = createStore({

  // "State" 组件的应用程序数据
  
  state () {
    return {myValue: 0};
  }
});

// 组件从其计算的属性拜访 state 
const MyComponent = {template: "<div>{{ myValue}}</div>",
  computed: {myValue () {return store.state.myValue;}   
  } 
};

组件能够从 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);

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

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

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

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

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

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

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

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

vue create vuex-example

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

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

mkdir src/store
touch src/store/index.js

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

// src/store/index.js

import {createStore} from "vuex";

export default createStore({});

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

// 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，它负责创立新的待办事项。

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>

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

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

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

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

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

当初，咱们向 store 增加一个 mutation 属性，并增加一个函数属性 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);
    }
  }
});

应用 commit 调用 `mutation`

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

要拜访 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 变量。
提交表单后，将调用 addTodo 办法
创立一个待办事项对象并将其“提交”到 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 store 的内容。

// 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.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 的毛病：

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

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

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

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

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

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

关于html5:Vuex-4-指南使用-Vue3-的需要看看

Vuex 解决的问题

Flux

准则 1：繁多起源

准则 2：数据是只读的

准则 3：mutation 是同步的

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

做一个应用 Vuex to-do-list

装置 Vuex

创立一个 Vuex store

将 store 增加到 Vue 实例

创立一个简略的应用程序

TodoNew.vue

定义 store 状态

定义 mutation

应用 commit 调用 `mutation`

回顾

读取 store 数据

定义 getters

你真的须要 Vuex 吗？

交换

Just My Socks（注册教程内含优惠码）

关于html5:Vuex-4-指南使用-Vue3-的需要看看

Vuex 解决的问题

Flux

准则 1：繁多起源

准则 2：数据是只读的

准则 3：mutation 是同步的

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

做一个应用 Vuex to-do-list

装置 Vuex

创立一个 Vuex store

将 store 增加到 Vue 实例

创立一个简略的应用程序

TodoNew.vue

定义 store 状态

定义 mutation

应用 commit 调用 mutation

回顾

读取 store 数据

定义 getters

你真的须要 Vuex 吗？

交换

Just My Socks（注册教程 内含优惠码）

应用 commit 调用 `mutation`

Just My Socks（注册教程内含优惠码）