Vue兄弟组件(非父子组件)状态共享与传值

前言：网上大部分文章写的有点乱，很少有讲得易懂的文章。

　　　所以，我写了篇在我能看得懂的基础上又照顾到大家的文章 =。=

- 作者：X1aoYE
- 备注：此文原创，转载请注明~ 内容里的<br>请无视。。

关键字：Vue、非父子组件、兄弟组件、传值、共享状态

应用例子：

主题颜色更换
购物车传值
就像名字所说的兄弟组件传值，自己理解其他例子了哈~

小型项目：

　 推荐使用 global event bus (事件总线) ，不然小项目里用 Vuex 相对来说会挺繁琐

　　 步骤：

　　 1. 新建一个 bus.vue (只是个 .vue ，不用想太多)

　　import Vue from 'vue' //import一个vue类

　　export const bus = new Vue() //实例化并将它export

　　 2. 使用

在我们的一个组件(这里指的是发送方)里：

import { bus } from 'bus.js'
// 其他代码~
bus.$emit('myEvent', 'this.mydata')
// 其他代码~
// 解释：bus.$emit('自定义事件名',要传送的数据);

　　 3. 接着使用 bus.vue

　　　 紧接着在我们另一个组件(这里指的是接收方)里：

　　　 备注：bus.$on('事件名',callback) ---------- callback即指回调$emit要传送的数据；

import { bus } from 'bus.js'

created () { //监听传值
  bus.$on('myEvent', (mydata) => {
     this.mydata = mydata;
  })
}

　　　　 备注：若只想监听一次事件，则使用bus.$once

　　　　注销：bus.$off('myEvent', ~~~自己写~~~);

　　　 步骤大致就这样~

中大型项目：

　 推荐使用 Vuex ，

解释一波：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；

　　　　　　　 vuex解决了组件之间同一状态的共享问题 (解决了不同组件之间的数据共享) ，使组件里面的数据持久化。

1. 安装vuex ：cnpm install vuex --save (什么是cnpm就不解释了，能学到Vuex的应该都了解cnpm了）

　　 2. 创建一个 vuex 文件夹，并在里面新建一个 store.js 写入以下代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

　　　 接着往下写：

　　　 state 定义数据：state在vuex中用于存储数据

//1.state在vuex中用于存储数据
var state={ //存放数据，数据中心
    count:1，
    // 其他数据格式：orderList: [],
    // 其他数据格式：params: {}
}

　　 getters 类似计算属性：

//2.
var getters= {
    computedCount: (state) => {
        return state.count*2
    }
}

　　 mutations 定义方法：mutations里面放的是方法，方法主要用于改变state里面的数据

　　　　　　　　　　　 同步操作，状态更改 ,只允许mutations里进行state更改

//3.mutations里面放的是方法，方法主要用于改变state里面的数据
var mutations={
    incCount(){
    ++state.count;
    }
}

　　　　action 定义方法：异步操作，Action 提交的是 mutation，而不是直接变更状态。

//4.
var actions= {
　　incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/
　　　　context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/
　　　　//此处按照实际情况扩展~
　　}
}

　　　　暴露！：暴露上面那四个~

const store = new Vuex.Store({
　　state,
　　mutations,
　　getters,
　　actions
})

export default store;

　　 3. 组件里去使用 Vuex：

(1). 获取state里面的数据

　 this.$store.state.数据

(2). 获取 getters里面方法返回的的数据 (一般vue 和 store 进行交互用 $store.getters， getters的值放在计算属性里，动态绑定在计算属性computed里）

　 this.$store.getters.computedCount

(3). 触发 mutations 改变 state里面的数据 (别记混了)

　 this.$store.commit('incCount');

(4). 触发 actions里面的方法 (别记混了)

　 this.$store.dispatch('incMutationsCount'); ps:这个 incMutationsCount 会再去 执行 mutations 里面的incCount方法

　　 4. 在src下新建一个文件夹store，接着新建一个文件index.js来放store对象。记得在 main.js 里添加store

　　 main.js：

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,
  template: '<按你的写/>',  
//第一层
  components: { 按你的写 }  
})

index.js：　

import Vuex from 'vuex'
import Vue from 'vue'
import storefrom './modules/store' //这个是我的store.js
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{ //模型
        store
    }
})

大概就这样~

这只是基础步骤，详细的要自己按照自己的详细情况加~

posted @ 2019-06-17 21:04 X1aoYE 阅读(1336) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

X1aoYE

Vue兄弟组件(非父子组件)状态共享与传值

公告