Vue不同单页面之间传值/兄弟组件传值

eventBus

对于非父子组件的传值，如果不是项目很大很复杂，可以使用eventBus方法来实现传值。这种方法通过一个空的Vue实例作为中央事件中心，用他来触发事件和监听事件。具体步骤如下：

1. 新建一个Vue实例。比如新建一个Bus文件夹。下面是index.js。在需要进行传值的页面读引入这个Bus文件夹。

import Vue from 'vue'
export default new Vue

2. 在需要传值的页面（组件）内通过$emit来触发一个自定义事件。

Bus.$emit("getCourse", this.coursename)

3. 然后在需要接收值的页面内通过$on来监听刚才已触发的自定义事件。

Bus.$on("getCourse", (msg) => {
      this.nameList.push(msg);
      console.log(this.coursename);
    });

Vuex

Vuex是什么

Vuex是适用于Vue项目开发时使用的状态管理工具。如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，就不利于管理和维护。因此，Vue为这些被多个组件频繁使用的值提供了一个统一管理工具—Vuex。

在具有Vuex的Vue项目中，只需要把这些值定义在Vuex中，即可在整个Vue项目的组件中使用。

每一个Vuex应用的核心就是store（仓库）。"store"基本上就是一个容器，它包含着应用中的大部分状态（state）。Vuex的状态存储是响应式的，不能直接改变store中的状态，改变store中状态唯一的途径就是 显式地提交（mutation）。

Vuex有什么用

用于跨组件通信

Vuex什么时候用

当两个组件不是父子组件进行通信的时候

Vuex的核心概念

• state：是一个对象，里面存放我们需要用的变量
• getter：获取state里面的变量（非必需，用了会更方便）
• mutation：用来改变state里面的变量（状态）的唯一方法
• action：动作，用来提交mutation
• module模块：项目需要用到state的变量很多的情况下，使用module来拆分（非必需，用了便于维护）

Vuex的具体操作

• 通过npm全局安装Vuex。

• 在项目根目录下创建一个store文件夹，并在里面创建index.js、state.js、actions.js、mutations.js、getters.js文件
  

• 在index.js文件中对vuex进行初始化.。

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

Vue.use(Vuex);

import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

state

vuex中使用state来存储应用中需要共享的状态。所有的数据都存在这里。
为了能让Vue组件在state更改后也随着改变，需要基于state创建计算属性。

//state.js
const state = {
  // todoList: JSON.parse(localStorage.getItem('todoList')) || []
  todoList: [
    '这是第一句话',
    '这是第二句话',
    '这是第三句话',
    '这是第四句话',
    '这是第五句话'
  ],
  name: '花花'
}
export default state;

页面中获取state内数据的方法

• 直接在需要的地方通过 this.$store.state.name来获取（这里是因为在state里面定义了name数据，视情况而定）

<p>获取state里面的数据：{{ this.$store.state.name }}</p>

• 在computed内声明一个变量返回并赋值给页面。

<template>
  <div>
    <p>获取state里面的数据：{{ name }}</p>
  </div>
</template>

<script>
export default {
  computed:{
    name(){
      return this.$store.state.name
    }
  }
}
</script>

mutations

mutation是Vuex中改变state数据的唯一方法。
mutation的使用与事件处理函数十分相似，都具有类型和回调函数。

//mutations.js
const mutations = {
  changeName(state) {
    state.name = '改变后的名字'
  }
}
export default mutations;

在设置好mutation之后，需要利用commit连触发mutation函数。
注意：commit是同步函数，只能是同步执行，那如果我们想一步操作的话就需要用另一种方法（下面的action）
在需要改变值的组件内：

  methods: {
    change() {
      // 直接commit了mutation里面的函数操作。
      this.$store.commit("changeName");
    },
  }

actions

如果需要异步操作state里面的数据，就需要通过action来执行。
action并不是直接改变state而是发起mutation。

• 首先需要在mutations中定义事件函数。如下面的add函数。

//mutations.js
const mutations = {
  // 同步事件函数，通过commit
  changeName(state) {
    state.name = '改变后的名字'
  },
  // 异步事件函数
  add(state) {
    state.number++;
  }
}
export default mutations;

• 在actions重新定义一个函数并在内部commit前面mutations中的函数事件。

//actions.js
const actions = {
  addNumber({ commit }) {
    setTimeout(function () {
      commit('add')
    }, 2000)
  }
}
export default actions;

• 最后在页面组件内发起action，注意这里使用的是dispatch。

changeNumber() {
      this.$store.dispatch("addNumber");
    }