[Vue3] Vue基础总结-终章(Vuex,生命周期,抽离封装)

一.Vuex状态商店的使用

它可以无视组件的层级关系直接传值, 需要在 /src/store/index.js中定义

传值过程: 客人(组件) -> 服务员(actions) -> 后厨(mutation) -> 菜品(state)

• 1.安装vuex

npm install vuex@next --save

• 2.创建vuex文件 (/src/store/index.js)

import {createStore} from 'vuex'
export default createStore({
    // 创建数据仓库 (菜品)
    state: {
        name: "马云",
        // 使用一下方法调用数据仓库
    },
    
    // 异步调用 (服务员) 使用dispath调用这里的方法
    actions: {
        test() {
            console.log("修改name")
        }
    },
    
    // 同步调用 (后厨), 使用 store.commit('方法名', 参数)调用这里的方法
    mutations: {
        SetName(state, name) {
            state.name = name
        }
    }
})

• 3.在App对象上挂载Vuex(main.js)

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

import store from './store/index.js'
const app = createApp(App)
app.use(store) //挂载数据仓库
app.mount('#app')

• 4.在vue组件中使用

<template>
    <div>
        {{res}}
        <button @click="SetName">修改name</button>
    </div>
</template>
<script>
import {computed} from 'vue'
import { useStore } from 'vuex'
export default {
    setup() {
        const store = useStore()
        // 使用计算属性, 让状态商品更新时, 能够更新页面
        const res = computed(() => {
            return store.state.name
        })
        
        const SetName = () => {
            // store.dispatch("sub") // 这种方式调用的是action里面的
            store.commit('SetName', '雷军')
        }
        
        return {res, SetName}
    }
}
</script>

二.生命周期

// 生命周期
onBeforeMount()  // 挂载之前调用
onMounted() 	 // 组件挂载时调用
onBeforeUpdate() // 数据更新时调用
onUpdated()      // 数据更改导致虚拟DOM重新渲染, 在这之后会调用
onBeforeUnmount()  // 写在组件实例之前调用
onUnmounted()	// 写在组件实例后调用
onErrorCaptured() // 当补货一个来自子孙组件的错误时被调用

// vue应用程序中4个主要时间
1.创建 - 组件创建时执行
2.挂载 - DOM被挂载时执行
3.更新 - 当响应数据被修改时执行
4.销毁 - 在元素被销毁之前离职运行

三.抽离封装

原本定义在组件里面的数据, 抽离封装到config/public.js中

组件中:

<template>
	<div>
		<h3>{{res_a.name}}</h3>
		<h3>{{res_a.age}}</h3>
		<h3>{{res_a.company}}</h3>
		
		<button @click="SetName">更改name</button>
	</div>
</template>

<script setup>
import pubLic from '../config/public.js'

// 原本定义在组件里面的数据, 抽离封装到config/public.js中
// const res_a = reactive({
// 	name: "马云",
// 	age: 50,
// 	company: "阿里巴巴"
// })

const res_a = pubLic()
const SetName = () => {
	res_a.name = "马化腾"
}
</script>

封装的js /src/config/public.js

import { reactive } from "vue"
const pubLic = () => {
	const res_a = reactive({
		name: "马云",
		age: 50,
		company: "阿里巴巴"
	})
	return res_a
}

export default pubLic