VUE 状态管理模式

FoamValue

发布于 2022-08-22 14:05:39

4960

发布于 2022-08-22 14:05:39

文章被收录于专栏：FoamValue

五一遇疫情 & 居家学VUE

一、前言

<!-- 视图 -->
<div>count: {{ count }}</div>
  
// 状态
data() {
  return {
    count: 0,
  };
},
// 操作
methods: {
  increment() {
    this.count++;
  },
},

Vue 的状态管理模式，

状态（State），驱动应用的数据源。
视图（View），以声明方式将状态映射到视图。
操作（Actions），响应在视图上的用户输入导致的状态变化。

单组件的数据流演示：

当多个组件之间存在状态管理模式时，多组件的数据流就变得非常的复杂。多层的父子嵌套组件、兄弟组件间的状态（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）。