抽象中最容易理解该缺陷：当应用程序中有多个共享数据的组件时，它们互连的复杂性将增加到无法预测或理解数据状态的地步。 因此，该应用程序无法扩展或维护。
Flux 是一个模式，不是一个库。我们不能去Github下载 Flux。它是一种类似MVC的设计模式。像Vuex和Redux这样的库实现Flux模式的方式与其他框架实现MVC模式的方式相同。
事实上，Vuex并没有实现Flux的全部，只是一个子集。不过现在不要担心这个问题，我们关注于理解它所遵循的关键原则。
原则1：单一来源
组件可能具有仅需要了解的本地数据。 例如，滚动条在用户列表组件中的位置可能与其他组件无关。
但是，要在组件之间共享的任何数据（即应用程序数据）都必须保存在一个单独的位置，与使用它的组件分开。
这个单一位置称为 “store”。 组件必须从该位置读取应用程序数据，并且不能保留其自己的副本以防止冲突或分歧。
import { createStore } from “vuex”;
// Instantiate our Vuex store
const store = createStore({
// “State” 组件的应用程序数据
state () {
return {
myValue: 0
};
}
});
// 组件从其计算的属性访问 state
const MyComponent = {
template: “
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/happy-williams-rdni7
如果大家自己的电脑尝试一波，那么可以使用下面的命令：
vue create vuex-example
安装 Vuex
cd vuex-example
npm i -S vuex@4
npm run serve
创建一个 Vuex store
现在，创建 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({});
将 store 添加到 Vue 实例
为了可以从任何组件中访问 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.vue
现在，添加一个新组件 TodoNew，它负责创建新的待办事项。
touch src/components/TodoNew.vue
打开 TodoNew.vue 并输入以下内容：
// src/components/TodoNew.vue
<input
type=“text”
placeholder=“Enter a new task”
v-model=“task”
/>
现在转到组件定义，有两个局部状态属性-task和给新待办事项提供唯一标识符的id。
// src/components/TodoNew.vue
…
定义 store 状态
过会，我们会创建一个显示待办事项的组件。 由于它和TodoNew组件都需要访问相同的数据，因此这是我们在 Vuex 存储中保存的全局state 的理想选择。
现在，回到state并定义属性状态。 这里使用 Vux4 提供的 createStore 函数，该函数返回一个对象。 该对象具有一个属性 todos，它是一个空数组。
// src/store/index.js
import { createStore } from “vuex”;
export default createStore({
state () {
return {
todos: []
}
}
});
定义 mutation
从原则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
<input
type=“text”
placeholder=“Enter a new task”
v-model=“task”
/>
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
最后写上我自己一直喜欢的一句名言：
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
