五一遇疫情 & 居家学VUE
一、前言
<!-- 视图 -->
<div>count: {{ count }}</div>
// 状态
data() {
return {
count: 0,
};
},
// 操作
methods: {
increment() {
this.count++;
},
},
Vue 的状态管理模式,
单组件的数据流演示:
当多个组件之间存在状态管理模式时,多组件的数据流就变得非常的复杂。多层的父子嵌套组件、兄弟组件间的状态(State)传递就变得维护特别困难,甚至无法维护。
为了解决状态(State)传递的问题,而诞生了一个单独的库。以全局单例模式来管理组件之间的共享状态,即 Vuex。
二、安装 Vuex
npm install vuex@next --save
+ vuex@4.0.2
三、Vuex
Vuex 的核心是 store (仓库),管理应用中的共享状态(State)。
如图:多个组件状态同步更新,
语法:
// 触发
this.$store.commit();
// 访问实例
this.$store.state;
四、代码实现
main.js
import { createStore } from 'vuex';
// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state) {
state.count++
}
}
})
// 整个应用支持 store
app.use(store);
HelloWord.vue
<!-- 视图 -->
<div>count: {{ this.$store.state.count }}</div>
<button @click="increment()">+1</button>
methods: {
increment() {
this.$store.commit("increment");
console.log(this.$store.state.count)
// console.log(this.$store.state.count);
},
},
HomePage.vue
<div>HP count: {{ this.$store.state.count }}</div>
五、核心概念
概念 | 描述 |
---|---|
State | 单一状态树,用一个对象包含全部应用的层级状态。 |
Getter | 计算属性,通过属性访问 State 中的值,以及通过方法访问时不会产生缓存结果。 |
Mutation | 修改 State 值的唯一方法,每个 mutation 都有一个字符串的事件类型(type)、一个回调函数(handler)。必须同步执行。 |
Action | 类似于 Mutation,不同在于:Action 提交的是 mutation,而不是直接修改状态。Action 可以异步执行。 |
Module | 允许将 State 分割为模块(Module)。 |
六、总结
从安装入门到状态管理模式,以上是本次假期学习 Vue 基础的全部内容了。
想要脱离 Vue 初学者的光环,剩下的只有在实战中的不停磨炼与再学习了。