20181129——Vue中兄弟组件互相传值 Vuex非子父兄弟传值

最简单的一个列子，可以利用子组件给父组件传值，$emit事件，父组件接收之后再给另一个子组件进行传值

这就是我前几天一直在看的vuex插件

Vue的组件通过Dispatch来调用action，action用于存放异步逻辑或者少量的同步逻辑，然后Actions在commit给mutations，mutation来更改state，然后重新渲染render

新建一个store文件，在新建一个index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		city:'beijing'
}
})

再从main.js中import

import Store from './store/index.js'

再在根部实例添加进去

new Vue({
	store,
})

这样每一个子组件都能用根部实例的store了
this.$store.state.city

想要改变这个store中的属性

this.$store.dispatch('changeCity', city)

再在index.js中间新建actions这个对象

actions: {
	changeCity(ctx,city) {
		ctx.commit('changeCity', city)
}
mutations: {
	changeCity(state, city){
		state.city= city
}
}

还可以新建一个state.js 和mutations.js 然后一起导入到index.js文件中

import {mapState} from 'vuex'

computed : {
 ...mapState(['city'])
}

就可以在组件中直接使用city这个属性了