Vuex

最新推荐文章于 2023-08-17 11:45:18 发布
置顶 最新推荐文章于 2023-08-17 11:45:18 发布
阅读量404 收藏
点赞数 1
分类专栏： vue
记录平时的问题，完全是给自己看的，垃圾博客，浪费各位大佬时间...
本文链接：https://blog.csdn.net/qq_40794973/article/details/107032713
版权

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.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.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

2 Vuex概述

2.2 Vuex是什么

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

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

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

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

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

3. Vuex的基本使用

3.1 安装vuex依赖包

vue create 项目名
npm install vuex --save

3.2 导入vuex包

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

3.3 创建store对象

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

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

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

4. Vuex的核心概念

4.1 核心概念概述

Vuex中的主要核心概念如下

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

4.2 State

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

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

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

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

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

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

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

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

4.3 Mutation

Mutation用于变更Store中的数据。

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

4.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)
    }
}

4.3.2 触发mutations的第二种方式

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

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

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

4.4 Action

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

4.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)
    }
}

4.4.2 触发actions的第二种方式

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

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

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

4.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 +'】'
        }
    }
})

4.5.1 使用getters的第一种方式

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

4.5.2 使用getters的第二种方式

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

 

爪 哇
关注
专栏目录
深度解析VueX源码
weixin_45291798的博客
01-03 1002
一直在用VueX但是对他的底层逻辑一知半解，因此想写这篇文章理清一下思路。主要了解和解决的问题：1、VueX到底是干啥用的，解决了什么问题？2、VueX在实际开发中怎么用？3、VueX源码中到底是如何实现数据响应式的，以及ctions、getters、mutations如何实现数据修改？本文章主要梳理的是Vuex底层是如何实现的，理解、读懂vuex的实现机制。本文以VueX4版本为例。
Vuex详解.pptx
08-05
"Vuex详解" Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理到底是什么？ 状态...
Vuex的底层的原理
weixin_50368372的博客
01-05 495
三分钟带你了解Vuex真正的核心底层逻辑
vuex核心概念和底层原理
hi_zf的博客
03-10 539
![](https://img-blog.csdnimg.cn/20210310161805290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hpX3pm,size_16,color_FFFFFF,t_70)
vuex 基础实现
MRNAN的博客
07-11 378
文章目录vuex使用实现实现getters实现mutations实现 actions扩展export vuex使用 首先知道vuex的基本用法，才能具体实现原理。 1.创建项目 基于vue-cli 创建一个项目： vue create vuex-project 打开项目，打开store/index.js: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state
【备忘】2018年Vue与Vue-router和Vuex深入底层全面分析讲解
qq_38472089的博客
09-01 599
一 认识vue 二 数据驱动 三 组件化 四 响应式原理深入讲解（一） 五 响应式原理深入讲解（二） 六 编译（一） 七 编译（二） 八 扩展（一） 九 扩展（二） 十 扩展（三） 十一 Vue-Router 十二 Vue 电子书.zip 源码.zip   本文转载自：http://javaxxz.com/thread-370468-1-1.html...
vue实现将数据存入vuex中以及从vuex中取出数据
10-16
Vue.js 是一款流行的前端框架，而 Vuex 是 Vue 的状态管理库，它帮助开发者集中管理和共享应用的状态。在大型 Vue 项目中，Vuex 可以有效地解决组件间的数据通信问题，使得状态管理更加有序和可追踪。本篇文章将详细...
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
10-17
在现代前端开发中，Vue.js作为一个流行的JavaScript框架，配合Vuex状态管理库能够很好地处理组件间的状态共享与管理问题。但在单页面应用（SPA）中，页面刷新会导致应用状态（state）丢失的问题一直存在，这个问题...
vuex-webextensions：一个Vuex插件，可通过webextensions组件共享存储
02-02
Vuex Web扩展 一个Node.JS模块，用于在“共享”上下文中在WebExtensions上使用Vuex，该模块允许您启动Vuex存储的多个实例，并使它们通过WebExtensions消息传递API保持同步。 将后台脚本上的Vuex存储实例用作主实例...
基于vue3 用vuex状态控制路由和按钮的权限
最新发布
11-20
结合Vuex，一个专为Vue设计的状态管理模式，我们可以实现对路由和按钮的动态权限控制。本文将深入探讨如何在Vue3项目中利用Vuex来管理和控制用户的访问权限。 首先，我们需要理解Vue3和Vuex的基础概念。Vue3引入了...
vuex的实现的底层原理
m0_64544033的博客
08-17 579
vuex的实现的底层原理
Vuex深入学习 --- 基础概念
山中何事的博客
09-18 200
Vuex深入学习 --- 基础概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 一. 特点: 1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候 若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 2. 你不能直接改变...
深入Vue底层，手写一个vuex
热门推荐
欧阳的技术博客
11-15 1万+
深入底层，手把手教你写一个Vuex1. Vuex是什么?什么场景下使用？2. Vuex的基本使用3. 手写一个vuex 1. Vuex是什么?什么场景下使用？ Vuex是vue的一个插件，叫做状态管理模式，全局共享某一些状态 通俗来讲，当各组件需要共享某一组状态的时候，会用到Vuex，兄弟组件及跨级组件传值也可以派上用场（如果数据量不大，或者组件状态不需要共享也可以用中央信息插件event-bus） 2. Vuex的基本使用 vue-cli 4.0 以上，在搭建脚手架的时候选择此项就可以 项目搭建完
Vue学习第四天：17Vuex核心概念及底层原理
qq_35294985的博客
11-05 233
min-vuex.js文件 import Vue from 'vue' //默认参数 function Store(option = {}) { //解构赋值 var { state = {}, mutations = {} } = option; //通过Vue将state设置为响应式数据 this._vm = new Vue({ data() { return { $$sta
【Vue 开发实战】生态篇 # 17：Vuex核心概念及底层原理
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-17 199
【Vue 开发实战】学习笔记。
「Vuex源码学习」你知道Vuex的实现原理吗？
秋天，黄叶坠地，凉风有信。
03-20 795
简单原理实现 讲解 看了Vuex源码文件，发现确实很多，我这里就讲我们最常用的部分功能的源码吧 其实使用过 Vuex 的同学都知道，我们在页面或者组件中都是通过this.$store.xxx 来调用的，那么其实，我们只要把你所创建的store对象赋值给页面或者组件中的$store变量即可 Vuex的原理通俗讲就是：利用了全局混入Mixin，将你所创建的store对象，混入到每一个Vue实例中，那么全局混入是什么呢？举个例子： import Vue from 'vue' // 全局混入 Vue.m
前端学习（2573）：vuex核心概念和底层原理
歌谣的博客
11-12 236
vuex实现原理
越思考越清晰
01-16 6828
vuex是什么？ 为什么会出现？ 为什么出现：vue一般是单项数据流， 作用：多个组件共享数据或者是跨组件传递数据， 怎么实现？
探索Vue底层实现原理系列（二）
pakerder的博客
10-10 446
一、Vue用的哪种设计模式？ 属于发布-订阅模式，在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图，而Compile通过Watcher订阅对应数据，绑定更新函数，通过D
Vuex深度解析与实战入门
集成 Vuex 到 Vue 项目中，首先需要通过 npm 安装 Vuex，接着在 `src/store/index.js` 文件中导入并使用 Vuex 模块，确保 Vue 已经使用 `Vue.use(Vuex)` 集成了 Vuex 功能。然后创建一个 Vuex Store 实例，并在主...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值