vue基础知识（day09）

有关vuex的相关基础知识

首先准备好vue项目文件夹（基于vue2）

项目目录结构如下

另新建一个store文件夹

首先是/store文件夹下面的index.js文件，如下代码

/*
 * @Author: 孙大大
 * @Date: 2022-03-05 10:30:45
 * @LastEditTime: 2022-03-05 14:32:03
 * @FilePath: \vuex_demo\src\store\index.js
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建了一个仓库实例
const store = new Vuex.Store({
    // 严格模式
    strict: true,
    // 配置项，核心概念
    // 存储数据的地方  任何组件都可以访问这里面存储的数据
    state: {
        num: 100,
        userInfo: {
            username: '小智',
            detail: {
                age: 30,
                gender: '男',
            },
        },
    },
    // mutations 唯一能修改数据的地方
    mutations: {
        // 形参1： 上面仓库的state的数据对象
        // 形参2： 可选参数，接收外面传入的数据
        changeNum(state, data) {
            state.num += data
            console.log(mutations)
        },
    },
    // actions 异步修改数据
    actions: {
        // context: 上下文对象 里面有commit和dispatch可以直接使用
        // data:可选参数，接收外部传入的对象
        changeNumAsync(context, data) {
            console.log('触发了changeNumAsync函数')
            console.log(context)
            console.log(data)
            // context.commit('changeNum', data) 直接修改
            setTimeout(() => {
                console.log('触发了changeNumAsync函数')
                context.commit('changeNum', data)
            }, 2000)
        },
    },
    // 建立快捷访问的方式
    getters: {
        userName(state) {
            return state.userInfo.username
        },
        age: (state) => state.userInfo.detail.age,
        gender: (state) => state.userInfo.detail.gender,
    },
})

export default store

然后是/components文件下的两个组件Add.vue 与 Reduce.vue

Add.vue

<!--
 * @Author: 孙大大
 * @Date: 2022-03-05 10:36:34
 * @LastEditTime: 2022-03-05 14:46:55
 * @FilePath: \vuex_demo\src\components\add.vue
-->
<template>
    <div>
        <h1>添加组件</h1>
        <p>共享数据num的值: {{ $store.state.num }}</p>
        <!-- 不推荐使用$store.state.num++这种方式修改数据 -->
        <!-- 缺点: 1.调试器不能同步 2.严格模式下会报错 -->
        <!-- <button @click="$store.state.num += 10">num+10</button> -->
        <button @click="$store.commit('changeNum', 10)">num+10</button>
        <!-- 异步修改 -->
        <button @click="$store.dispatch('changeNumAsync', 5)">异步修改num+5</button>
        <!-- 快速访问数据 -->
        <p>用户的名字:{{ $store.getters.userName }}</p>
        <p>用户的年龄:{{ $store.getters.age }}</p>
        <p>用户的性别:{{ $store.getters.gender }}</p>
    </div>
</template>

<script>
// state访问的方式一  $store.state.num
// 触发 mutations 修改state数据的方式一 $store.commit('fn',data)
// 触发 actions 异步修改state数据的方式一 $store.dispatch('fn',data)
export default {}
</script>

<style></style>

Reduce.vue

<!--
 * @Author: 孙大大
 * @Date: 2022-03-05 10:36:49
 * @LastEditTime: 2022-03-05 14:58:02
 * @FilePath: \vuex_demo\src\components\Reduce.vue
-->
<template>
    <div>
        <h1>减少组件</h1>
        <p>共享数据的值: {{ num }}</p>
        <!-- 不推荐使用$store.state.num++这种方式修改数据 -->
        <button @click="changeNum(-10)">num-10</button>

        <button @click="changeNumAsync(-5)">异步修改num-5</button>
        <p>姓名:{{ userName }}</p>
        <p>年龄:{{ age }}</p>
        <p>性别:{{ gender }}</p>
    </div>
</template>

<script>
// 访问state数据的方式二
// 1 import {mapState} from 'vuex'；引入辅助函数mapState
// 2 ...mapState(['num']), 将state里面的属性映射为当前组件的计算属性

// 触发 mutations 修改数据的方式二
// 1 import {mapState，mapMutations} from 'vuex'
// 2 methods中 ...mapMutations(['fn']) 将mutations里面的方法映射为当前组件的方法

// 触发 actions 异步修改数据的方式二
// 1 import {mapActions} from 'vuex'
// 2 methods中 ...mapActions(['fn']) 将actions里面的方法映射为当前组件的方法

// mapGetters 建立快捷访问的方式二
// 1 import {mapGetters} from 'vuex'
// 2 ...mapGetters(['userName', 'age', 'gender']),将getters里面的方法映射为当前组件的计算属性
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    computed: {
        // 将state里面的属性映射为当前组件的计算属性
        ...mapState(['num']),
        ...mapGetters(['userName', 'age', 'gender']),
    },
    methods: {
        // 将mutations里面的方法映射为当前组件的方法
        ...mapMutations(['changeNum']),
        // 将actions里面的方法映射为当前组件的方法
        ...mapActions(['changeNumAsync']),
    },
}
</script>

<style></style>

App.vue

<!--
 * @Author: 孙大大
 * @Date: 2022-03-05 10:28:04
 * @LastEditTime: 2022-03-05 14:14:44
 * @FilePath: \vuex_demo\src\App.vue
-->
<template>
    <div>
        <Add></Add>
        <hr />
        <Reduce></Reduce>
    </div>
</template>

<script>
import Add from '@/components/Add'
import Reduce from '@/components/Reduce'
export default {
    components: {
        Add,
        Reduce,
    },
    created() {
        console.log(this.$store)
    },
}
</script>

<style></style>

main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store'

Vue.config.productionTip = false

new Vue({
    store,
    render: (h) => h(App),
}).$mount('#app')