vue3学习笔记（14）Vuex

Vue3专栏入口

一、啥是Vuex?

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

二、案例模拟

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

2.1 目录结构

2.2 Category.vue

<template>
<div class="s">
    子
    {{ store.state.number ? store.state.number : 123 }}

</div>
</template>

<script lang="ts">

import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
    name: 'Category',
    setup(props, context) {

        const store = useStore()
        
        return{
            store
        }
    }
})
</script>

<style scoped>
.s{
    background-color: aqua;
}
</style>

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

<template>
	<div class="f">
		父
		<CategoryVue></CategoryVue>
		<button @click="add">点击加{{ sum.Number }}</button>
		<input type="text" v-model.number="sum.Number">
	</div>
</template>

<script lang="ts">

import { defineComponent, ref,reactive } from 'vue'
import CategoryVue from './components/Category.vue'
import { useStore } from 'vuex'
export default defineComponent({
	name: 'App',
	components: {
		CategoryVue
	},
	setup(props, context) {
		const sum = reactive({
			Number:1
		})

		const store = useStore()

		const add = () => {
			store.dispatch("add", sum.Number)
		}

		return {
			add,
			sum
		}
	}
})
</script>

<style scoped>
.f{
	background-color: antiquewhite;
	height: 200px;
	width: 300px;
}
</style>

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

<template>
<div class="s">
    子
    {{ store.state.number ? store.state.number : 123 }}
    {{ store.getters.bigNumber ? store.getters.bigNumber : "放大十倍" }}
</div>
</template>

<script lang="ts">

import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
    name: 'Category',
    setup(props, context) {

        const store = useStore()
        
        return{
            store
        }
    }
})
</script>

<style scoped>
.s{
    background-color: aqua;
}
</style>