状态管理模式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版本写法

<template>
    <div>
        <div>
            <!-- 2：渲染 count 变量 -->
            {{$store.state.count}}
            <!-- {{count}} 使用别名-->
        </div>
        <div>
            <!-- 3：通过按钮事件更改 count 的值 -->
            <button @click="add">操作count自增</button>
        </div>
    </div>
</template>

<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版本写法

// 这个是在 传值的时候这样使用
<script setup>
import { useStore } from 'vuex'

const store = useStore()

function add(item) {
    store.commit('myMutation', item)
}
</script>

// 重点：取值的时候如下
<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>