vuex介绍以及使用

Vuex

1. 什么是 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. 安装

在项目中执行如下命令来安装 vuex

npm install vuex@next

3. 开始

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

3.1 创建仓库

在 src 目录下创建 store 目录，然后在这个目录下新建 index.ts 仓库文件。

import {createStore} from 'vuex'

export const store = createStore({
    // 定义一个状态（数据）
    state() {
        return {
            count: 0
        }
    }
})

3.2 引入仓库

要想使用 Vuex 来进行状态（数据）管理，首先需要在入口文件（main.ts）中导入 vuex

import { createApp } from 'vue'
import App from './App.vue'

import { store } from './store'

createApp(App).use(store).mount('#app')

3.3 使用仓库

为了方便，我们就在 App.vue 根组件中使用。

<template>
    <h3>{{ count }}</h3>
</template>

<script setup lang="ts">
import {useStore} from "vuex";
import {computed} from "vue";

const store = useStore()

// 计算属性
const count = computed(() => store.state.count)
</script>

首先需要引入仓库对象，然后通过计算属性来获取仓库中的状态（数据）。

3.4 修改状态

此时，我们需要对状态（数据）进行修改，比如点击一次就加 1。那么如何实现？

3.4.1 定义事件

首先我们需要添加点击事件，然后在事件中来安成功能。

<template>
    <h3>{{ count }}</h3>
    <button @click="increment">+</button>
</template>

<script setup lang="ts">
import {useStore} from "vuex";
import {computed} from "vue";

const store = useStore()

// 计算属性
const count = computed(() => store.state.count)

// 定义事件
const increment = () => {
    store.state.count++
}
</script>

3.4.2 定义mutations

这种方式能够实现状态的修改，但是我们不推荐这么使用，需要希望通过 Mutation 对象来完成。因此需要在仓库对象中，添加 Mutation 相应的方法。

export const store = createStore({
    // 定义一个状态（数据）
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        // 增加的方法
        increment (state: any) {
            state.count++
        }
    }
})

我们在创建 store/index.ts 中增加了一个 mutations 节点，然后在节点中增加了 increment() 方法，这个方法会接收一个参数，这个参数是状态对象。

3.4.3 使用mutations

// 定义事件
const increment = () => {
    store.commit('increment') // 放的是方法名称
}

3.5 actions使用

在创建配置文件中定义 actions 节点，并添加相应的方法。如：

export const store = createStore({
    // 定义一个状态（数据）
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        // 增加的方法
        increment (state: any) {
            console.log('mutations 中 increment 方法被调用')
            state.count++
        },
        // 减少的方法
        decrement (state: any) {
            state.count--
        },
        // 增加指定数据的方法
        add ( state: any, payload: number) {
            state.count += payload
        },
        // 减少指定数量的方法
        sub (state: any, p: number) {
            state.count -= p
        },
    },
    actions: {
        increment(context) {
            console.log('actions 中 increment 方法被调用')
            context.commit('increment')
        },
        decrement(context) {
            context.commit('decrement')
        },
        add (context) {
            context.commit('add')
        },
        sub (context) {
            context.commit('sub')
        }
    }
})