Vue.js入门教程（七）

目录

状态管理模式Vuex

1：简介

2：安装

3：配置

核心概念说明

多组件数据通讯

计算属性 getters

---

官网：https://vuex.vuejs.org/zh

状态管理模式Vuex

1：简介

Vuex 是集中式存储管理应用的所有组件的状态（数据）。可实现任意组件之间的通讯。

2：安装

npm install vuex

npm install vuex@3 --save                // vue2.x 安装此版本 

3：配置

新建 src/store/index.js 状态文件

配置状态文件

配置 main.js 

核心概念说明

• state：状态树，用一个对象就包含了全部的应用层级状态。作为一个“唯一数据源”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段。
• mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方。
• actions： 类似于 mutation，不同在于：action 提交的是 mutation，而不是直接变更状态。action 可以包含任意异步操作。

---

多组件数据通讯

需求：有一个变量 count，通过使用 vuex 更改这个变量的值

代码

src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
    actions: {
        // 5
        // 自定义事件mySj，通过 $store.dispatch() 触发该事件执行
        // context: 用于连接 action 和 mutation 的上下文
        // value: $store.dispatch() 第二个参数传递过来的数据
        mySj(context, value) {
            // 提交自定义mutation事件 myMutation
            context.commit("myMutation", value);
        }
    },
    mutations: {
        // 6
        // actions 中的 commit 执行会触发指定的事件函数
        // state: state对象，拿到此对象就可以更改state对象中的数据
        // value: 传递过来的数据
        myMutation(state, value) {
            state.count += value;
        }
    },
    state: {
        count: 0            // 1：在 vuex 定义一个公共变量 count，多组件中使用的相同变量，可以放在此处用于实现多组件数据通讯
    }
})
 
export default store;

xxx.vue 组件 vue2版本写法

 
<script>
export default {
    methods: {
        add() {
            // 4：vuex提供的异步操作api，用于触发 action 事件，参数1：自定义事件名称mySj, 参数2：要传递的数据
            this.$store.dispatch('mySj', 1);    
            // vuex提供的同步操作api，用于触发 mutation 事件，参数1：自定义事件名称myMutation, 参数2：要传递的数据
            // this.$store.commit('myMutation', 1);    
        }
    },
    /**
     * 相当于起别名
    computed:{
        count() {
            return this.$store.state.count
        }
    }
     */
}
script>

xxx.vue 组件 vue3版本写法

// 这个是在 传值的时候这样使用
 
// 重点：取值的时候如下
<template>
	{{current.name}}
template>
<script setup>
import { computed, reactive } from "vue"
 
import { useStore } from 'vuex'
 
// 这里一定一定一定要使用 reactive
const store = reactive(useStore());
 
// 计算属性，动态更新数据
let current = computed(() => {
    return store.state.tab.currentMenu;
})
script>

---

计算属性 getters

        定义

对 store 中 state 数据进行加工

        配置

getters: {
    changeCount(state) {        // 自定义处理数据函数
        return state.count * 2;
    },
}

        读取

this.$store.getters.changeCount;                // xxx.vue中获取处理后的数据