vue3学习笔记（14）Vuex

Vue3专栏入口

文章目录 一、啥是Vuex?二、案例模拟2.1 目录结构2.2 Category.vue2.3 index.js2.4 App.vue2.5 main.js 三、vuex getters配置项3.1 index.js3.2 Category.vue

一、啥是Vuex?

概念 : 在vue中实现集中式状态(数据)管理的一个Vue插件。也是组件之间通信的一种方式，使用于任意组件之间的通信。

二、案例模拟

需求是在父组件中点击按钮 子组件中的数据会将默认值123替换为初始数据并加1（初始数据为0 +1 后变为1），用户还可以输入要加的数字。

2.1 目录结构

2.2 Category.vue

2.3 index.js

import { createStore } from "vuex";

export default createStore({
    // 存储数据
    state: {
        number: 0
    },
    //  *** 作数据
    mutations: {
        ADD: (state, value) => {
            console.log("mutations", value);
            state.number += value
        }
    },
    // 响应动作
    actions: {
        add: (constext, value) => {
            console.log("actions", value);
            constext.commit("ADD", value)
        }
    },
})

2.4 App.vue

2.5 main.js

import { createApp } from 'vue'
import App from './App.vue'
// 引入store
import store from './store'

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

三、vuex getters配置项

对数据进行加工后再返回

使用getters添加一个放大十倍的数据。

我们只对index.js和Category.vue进行了修改，代码如下:

3.1 index.js

import { createStore } from "vuex";

export default createStore({
    // 存储数据
    state: {
        number: 0
    },
    //  *** 作数据
    mutations: {
        ADD: (state, value) => {
            console.log("mutations", value);
            state.number += value
        }
    },
    // 响应动作
    actions: {
        add: (constext, value) => {
            console.log("actions", value);
            constext.commit("ADD", value)
        }
    },
    // 数据加工
    getters: {
        bigNumber: (state) => {
            return state.number * 10
        }
    }
})

3.2 Category.vue