Vuex


1 Vuex 概述

1.1 组件之间共享数据的方式

1.1.1 父向子传值:v-bind 属性绑定

<!--
    父组件 Father.vue
-->
<template>
    <div>
        <Son msg="Welcome to Your Vue.js App" :personArr="persons" v-bind:desc="desc"/>
    </div>
</template>
<script>
    import Son from './components/Son.vue'
    export default {
        data() {
            return {
                persons: [
                    {name: '蔡徐坤', age: 30},
                    {name: '乔碧萝', age: 58},
                    {name: '卢本伟', age: 20},
                    {name: '罗志祥', age: 18},
                ],
                desc: 'v-bind'
            }
        },
        components: {
            Son
        }
    }
</script>
<!--
    子组件 Son.vue
-->
<template>
    <div>
        <h1>{{ msg }}</h1>
        <h1>{{ desc }}</h1>
    </div>
</template>
<script>
    export default {
        // 声明接收属性,这个属性就会成为组件对象的属性(和data效果一样)
        // 如果孙子组件需要用到,可以继续传递
        props:['msg','desc','personArr'],
        // props: {
        //     // 指定了属性名和属性值的类型
        //     msg: String,
        //     desc: String,
        //     personArr: Array
        // },
        mounted: function () {
            console.log(this.personArr)
        }
    }
</script>

1.1.2 子向父传值:定义事件

直接把函数传递给子组件

<!--
    父组件 Father.vue
-->
<template>
    <div>
        <Son :handMsg="handMsg"/>
    </div>
</template>
<script>
    import Son from './components/Son.vue'
    export default {
        components: {
            Son
        },
        methods: {
            handMsg(data) {
                alert(data)
            }
        }
    }
</script>
<!--
    子组件 Son.vue
-->
<template>
    <button @click="sendMsg">button</button>
</template>
<script>
    export default {
        props: {
            handMsg: { // 1.属性名
                type: Function, // 2.属性值类型
                required: true // 2.必要性
            }
        },
        methods: {
            sendMsg() {
                this.handMsg(['蔡徐坤', '乔碧萝', '卢本伟', '罗志祥'])
            }
        }
    }
</script>

v-on 事件绑定

  • $on 接收数据的那个组件
  • $emit 发送数据的那个组件
<!--
    父组件 Father.vue
-->
<template>
    <div>
        <!--
            <Son @son-msg="handMsg"/>
        -->
        <Son v-on:son-msg="handMsg"/>
    </div>
</template>
<script>
    import Son from './components/Son.vue'
    export default {
        components: {
            Son
        },
        methods: {
            /**
             * 处理子组件发出的事件
             * @param data 传递的数据
             */
            handMsg(data) {
                alert(data)
            }
        }
    }
</script>
<!--
    子组件 Son.vue
-->
<template>
    <button @click="sendMsg">button</button>
</template>
<script>
    export default {
        methods: {
            sendMsg() {
                // 触发自定义事件
                this.$emit('son-msg', ['蔡徐坤', '乔碧萝', '卢本伟', '罗志祥'])
            }
        }
    }
</script>

注意

<!--
    父组件 Father.vue
-->
<template>
    <div>
        <Son @son-msg="handMsg"/>
    </div>
</template>
<script>
    import Son from './components/Son.vue'
    export default {
        components: {
            Son
        },
        methods: {
            /**
             * 处理孙子组件发出的事件
             * @param data 传递的数据
             */
            handMsg(data) {
                alert(data)
            }
        }
    }
</script>
<!--
    子组件 Son.vue
-->
<template>
    <div>
        <button @click="sendMsg">son</button>
        <grandson/>
    </div>
</template>
<script>
    import Grandson from './Grandson.vue'
    export default {
        components: {Grandson},
        methods: {
            sendMsg() {
                // 触发自定义事件
                this.$emit('son-msg', ['蔡徐坤', '乔碧萝', '卢本伟', '罗志祥'])
            }
        }
    }
</script>
<!--
    孙子组件 Grandson.vue
-->
<template>
    <div>
        <!--
            无效,不能直接传递到爷爷哪里,如果要传递,只能是逐层传递
        -->
        <button @click="sendMsg">grandson</button>
    </div>
</template>
<script>
    export default {
        methods: {
            sendMsg() {
                // 触发自定义事件
                this.$emit('son-msg', ['蔡徐坤', '乔碧萝', '卢本伟', '罗志祥'])
            }
        }
    }
</script>

1.1.3 兄弟组件之间共享数据

pubsub.js消息的发布订阅;两个组件通信没有任何的要求,兄弟、父子、都可以

npm install pubsub-js --save
<!--
    Father.vue
-->
<template>
    <div>
        <Gege/>
        <Didi/>
    </div>
</template>
<script>
    import Gege from './components/Gege.vue'
    import Didi from './components/Didi.vue'
    export default {
        components: {
            Gege,
            Didi
        }
    }
</script>
<!--
    Gege.vue
-->
<template>
    <div>
        <!--
            给兄弟组件发送消息
        -->
        <button @click="sendMsg">给弟弟发送消息</button>
    </div>
</template>
<script>
    import PubSub from 'pubsub-js'
    export default {
        methods: {
            // 发布消息
            sendMsg(){
                const data = ['蔡徐坤', '乔碧萝', '卢本伟', '罗志祥']
                PubSub.publish('handMsg',data)
            }
        }
    }
</script>
<!--
    Didi.vue
-->
<template>
    <div></div>
</template>
<script>
    import PubSub from 'pubsub-js'
    export default {
        mounted() {
            // 订阅消息
            // msg就是handMsg(无用,但是必须得写),data是传递过来的数据
            PubSub.subscribe('handMsg', function (msg, data) {
                console.log(data)
            })
        }
    }
</script>

EventBus

1.2 Vuex 是什么

Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。

1.3 使用 Vuex 统一管理状态的好处

  1. 能够在 vuex 中集中管理共享的数据,易于开发和后期维护
  2. 能够高效地实现组件之间的数据共享,提高开发效率
  3. 存储在 vuex 中的数据都是响应式的,能够实时保持数据与页面的同步

1.4 什么样的数据适合存储到 Vuex 中

一般情况下,只有组件之间共享的数据,才有必要存储到 vuex 中;对于组件中的私有数据,依旧存储在组件自身的 data 中即可。


2. Vuex 的基本使用

2.1 安装 vuex 依赖包

vue create 项目名
npm install vuex --save

2.2 导入 vuex 包

// src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

2.3 创建 store 对象

// src/store/index.js
export default new Vuex.Store({
    // state 中存放的就是全局共享的数据
    state: {count: 0}
})

2.4 将 store 对象挂载到 vue 实例中

// src\main.js
import store from './store/index.js'
new Vue({
    el: '#app',
    render: h => h(app),
    router,
    // 将创建的共享数据对象,挂载到 Vue 实例中
    // 所有的组件,就可以直接从 store 中获取全局的数据了
    store
})

3. Vuex 的核心概念

3.1 核心概念概述

Vuex 中的主要核心概念如下

  1. State
  2. Mutation
  3. Action
  4. Getter

3.2 State

State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储。

// 创建store数据源,提供唯一公共数据
const store = new Vuex.Store({
    state: {count: 0}
})

3.2.1 组件访问 State 中数据的第一种方式

this.$store.state.全局数据名称
this.$store.state.count

3.2.2 组件访问 State 中数据的第二种方式

// 1. 从 vuex 中按需导入 mapState 函数
import {mapState} from 'vuex'

通过刚才导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的 computed 计算属性

// 2. 将全局数据,映射为当前组件的计算属性
computed: {
 ...mapState(['count'])
}

3.3 Mutation

Mutation 用于变更 Store中 的数据。

  1. 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据
  2. 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化
// 定义 Mutation
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            // 变更状态
            state.count++
        }
    }
})

3.3.1 触发 mutations 的第一种方式 

// 触发mutation
methods: {
    addOne() {
        // 触发 mutations 的第一种方式
        this.$store.commit('add')
    }
}

可以在触发 mutations 时传递参数

// 定义Mutation
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addN(state, step) {
            // 变更状态
            state.count += step
        }
    }
})
// 触发mutation
methods: {
    addN() {
        // 在调用 commit 函数,
        // 触发 mutations 时携带参数
        this.$store.commit('addN', 3)
    }
}

3.3.2 触发 mutations 的第二种方式 

// 1. 从 vuex 中按需导入 mapMutations 函数
import {mapMutations} from 'vuex'

通过刚才导入的 mapMutations 函数,将需要的 mutations 函数,映射为当前组件的 methods 方法

// 2. 将指定的 mutations 函数,映射为当前组件的 methods 函数
methods: {
    ...mapMutations(['add', 'addN'])
}

3.4 Action

Action 用于处理异步任务;如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据

3.4.1 触发 actions 的第二种方式 

// 定义 Action
const store = new Vuex.Store({
    // ...省略其他代码
    mutations: {
        add(state) {
            state.count++
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        }
    }
})
// 触发 Action
methods: {
    addOneAsync() {
        // 触发 actions 的第一种方式
        this.$store.dispatch('addAsync')
    }
}

触发 actions 异步任务时携带参数

// 定义 Action
const store = new Vuex.Store({
    // ...省略其他代码
    mutations: {
        addN(state, step) {
            state.count += step
        }
    },
    actions: {
        addNAsync(context, step) {
            setTimeout(() => {
                context.commit('addN', step)
            }, 1000)
        }
    }
}) 
// 触发 Action
methods: {
    addNAsync() {
        // 在调用 dispatch 函数,
        // 触发 actions 时携带参数
        this.$store.dispatch('addNAsync', 5)
    }
}

3.4.2 触发 actions 的第二种方式

// 1. 从 vuex 中按需导入 mapActions 函数
import {mapActions} from 'vuex'

通过刚才导入的 mapActions 函数,将需要的 actions 函数,映射为当前组件的 methods 方法

// 2. 将指定的 actions 函数,映射为当前组件的 methods 函数
methods: {
    ...mapActions(['addASync', 'addNASync'])
}

3.5 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据(相当于计算属性)

  1. Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性
  2. Store 中数据发生变化,Getter 的数据也会跟着变化
// 定义 Getter
const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        showNum: state => {
            return '当前最新的数量是【'+ state.count +'】'
        }
    }
})

3.5.1 使用 getters 的第一种方式

this.$store.getters.名称
this.$store.getters.showNum

3.5.2 使用 getters 的第二种方式

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['showNum'])
}

 

展开阅读全文
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值