组件与组件之间的通信传值 -- vuex
发布在vue2016年7月22日view:8925Web组件,模块化web框架vue
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前言

尤大大的vue从14年开始诞生到目前 vuex (vue2) 的API逐渐完善。不禁感叹尤大神的坚持和伟大的贡献,当然更多的对其技术厉害的崇拜。于是在vue盛行的当下决定领略它的轻、快、高效。

零、开始第一个DEMO

开始第一个DEMO,其中一个功能需求 - - 组件与组件之间作用域里,但又需要传递数据

例如:App.vue为父组件,有子组件A.vue、B.vue。

  1. App的数据传递给A、B
  2. A、B数据传递给App
  3. A、B数据相互传递

一、思路

解决以上需求的思路如下:

  1. App 通过 props 传递数据给A、B
  2. A、B通过 $dispatch 调用App的 Event 并传递数据给App
  3. A通过 $dispatch 调用App的 Event 并传递数据,App通过 $broadcast 调用 B的Event 并传递数据

当需要通信的组件是父子关系时,可以使用props $dispatch $broadcast 传递数据,然而,当需要通信的组件是非父子关系时,他们就需要一个共同的父组件作为介质才能相互传递数据。如果项目大,组件通信多并频繁,那么App 作为二者之间的协调者,导致这些组件并没法被复用,被迫紧密耦合。管理起来也非常的麻烦。

于是vuex由此诞生了,尤大大说, Vuex 所要解决的问题:如何管理一个包含许多组件的大型应用。

二、Vuex

流程图解如下:

enter image description here

store:store 存储应用所需的数据。

action:是一种专门用来被 component 调用的函数。action 函数能够通过分发相应的 mutation 函数,来触发对 store 的更新。action 也可以先从 HTTP 后端或 store 中读取其他数据之后再分发更新事件。

getter:也是用来被 component 调用的函数。getter函数是获取store的state对象组件B所需的值。

三、使用vuex

App.vue

<template>
  <div>
     <A></A>
     <B></B>
  </div>
</template>

<script>

import A from './A.vue'
import B from './B.vue'

export default {
     components: {
         A: A,
         B: B
      }
}
</script>

A.vue

<template>
  <div>
        <input type="date" placeholder="Date" />
        <button>保存</button>
   </div>
</template>

<script>
  export default {

  }
</script>

B.vue

<template>
  <div>
    <p>vuex demo</p>    
  </div>
</template>

<script>
  export default {

  }
</script>

1. 加入store

先用npm安装Vuex:

$ npm install --save vuex

建一个新文件 vuex/store.js:

import Vue from 'vue'
import Vuex from 'vuex'

// 告诉 vue “使用” vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
const state = {
  // TODO: 放置初始状态
}

// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
  // TODO: 放置我们的状态变更函数
}

// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以连接到我们的应用中
export default new Vuex.Store({
  state,
  mutations
})

在需要修改的根组件注入 store,修改App.vue:

<script>

import A from './A.vue'
import B from './B.vue'
import store from './vuex/store' // import 刚创建的 store

export default {
     components: {
         A: A,
         B: B
      },
     store: store
}
</script>

2.创建 action

在A.vue组件里创建并调用action 函数,修改A.vue:

<template>
  <div>
        <input type="date" v-model="myData" placeholder="Date" />
        <button @click="save()">保存</button>
   </div>
</template>

<script>
  export default {
     data(){
          return{
              myData:'myData'
          }
      },
     methods:{
       save(){
        let value = this.myData
        this.update(value)
        }
      },
      vuex:{
        actions:{
          update:function({dispatch},value) {
            dispatch('UPDATE',value)
          }
        }
      }
  }
</script>

3. 创建 state 和 mutation

修改 vuex/store.js:

const state = {
  // 应用启动时,myData置为0
  myData: ''
}

const mutations = {
  // mutation 的第一个参数是当前的 state
  // 你可以在函数里修改 state
  UPDATE (state, value) {
    state.myData = value
  }
}

4.在组件获取值

修改B.vue:

<template>
  <div>
    <p>{{myData}}</p>    
  </div>
</template>

<script>
  export default {
    vuex:{
      getters:{
        myData: function(state){
          return state.myData
        }
      }
    }
  }
</script>

四、相关资料

评论
发表评论
10个月前

欢迎大家加入—极乐问答平台,一个提供给开发者的技术

交流平台。

技术交流群—JavaScript问答交流群 Java问答交流群 Android开发问答交流群 iOS开发问答交流群 欢迎加入!

10个月前
赞了此文章!
10个月前
添加了一枚【评注】:>欢迎大家加入—[极乐问答平台](http://www.dreawer.com/),一个提供给开发者的技术 交流平台。 >技术交流群—[JavaScript问答交流群](http://jq.qq.com/?_wv=1027&k=2IpW3RL) [Java问答交流群](http://jq.qq.com/?_wv=1027&k=29qxbHX) [Android开发问答交流群](http://jq.qq.com/?_wv=1027&k=2A5vyqc) [iOS开发问答交流群](http://jq.qq.com/?_wv=1027&k=2ArRZ5C) 欢迎加入!
WRITTEN BY
执笔的蜗牛
Life is like the ocean
TA的新浪微博
PUBLISHED IN
vue

Vue.js 是尤大大开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。

此专栏专门记录我学习vue的过程中遇到的困难和总结

我的收藏