最简单的一个列子,可以利用子组件给父组件传值,$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这个属性了