本篇文章之前是我在三大框架的对比中已经总结了vue使用vuex在非父子组件之间的传值,但是想到自己应该单独把这个知识拿出来总结一下,方便以后查阅
- 1.先创建父组件A.vue,并且引入B组件和C组件,B和C的关系是兄弟组件(非父子关系)
<template>
<div>
<B></B>
<C></C>
</div>
</template>
<script>
import B from "./B";
import C from "./C";
export default {
name: "A",
components: {
B,
C
}
};
</script>
- 2.创建B.vue
<template>
<div>
<input v-model="name" />
<button @click="$store.commit('getName', name)">发送</button>
</div>
</template>
<script>
import store from "./../store";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
name: "B",
data() {
return {
name: ""
};
},
methods: {
...mapMutations(["getName"])
}
};
</script>
state.js
const state = {
name: ' ',
}
export default state
首先我们在state
中给name设置初始值,然后使用this.$store.commit('getName', name)
将getName
提交给mutations
,然后我们可以在mutations
中对name
值进行处理
const mutations = {
getName(state, value) {
state.name = value;
}
}
export default mutations
创建C组件
<template>
<div>
<h1>{{ name }}</h1>
</div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
name: "C",
data() {
return {};
},
computed: mapState(["name"]),
methods: {}
};
</script>
这里在computed
计算属性中监听name
,通过map(['name'])
,来获取状态树中name值,然后直接在组件中可以显示了,这里的name的值是来自B组件中的.
这样就完成了在vue项目中使用vuex进行非父子组件之间的传值