Vue不同单页面之间传值/兄弟组件传值
文章目录
- eventBus
- Vuex
- Vuex是什么
- Vuex有什么用
- Vuex什么时候用
- Vuex的核心概念
- Vuex的具体操作
- state
- 页面中获取state内数据的方法
- mutations
- actions
eventBus
对于非父子组件的传值，如果不是项目很大很复杂，可以使用eventBus方法来实现传值。这种方法通过一个空的Vue实例作为中央事件中心，用他来触发事件和监听事件。具体步骤如下：
- 新建一个Vue实例。比如新建一个Bus文件夹。下面是index.js。在需要进行传值的页面读引入这个Bus文件夹。
import Vue from 'vue'
export default new Vue
- 在需要传值的页面（组件）内通过$emit来触发一个自定义事件。
Bus.$emit("getCourse", this.coursename)
- 然后在需要接收值的页面内通过$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");
}