vue组件之间vuex传递数据

vue项目开发，组件之间传递数据

1. 兄弟组件
   兄弟组件之间传输数据，用vuex的store方式。
2. 父子组件
   父子组件之间传输数据，用vue的prop & $emit方式。

vuex：vue的状态管理工具

1.安装

npm install vuex --save

2.引入

./src/main.js

import Vue from 'vue'
import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

./src/store/index.js

import Vue from 'vue'
import vuex from 'vuex'
import module1from '../static/js/module1.js'  //不同组件的变量建议分不同模块存放，方便管理

Vue.use(vuex)

export default new vuex.Store({
  state: {
    //  定义状态
    state1: {
      state1: '你好'  //可以是任何对象
    },
   ......
  },
  modules: {
    module1: module1,
   ......
  }
})

3.将状态映射到组件

xxx.vue

4.在组件中修改状态
通过点击按钮，触发setState方法，修改state1状态值，同时更新到页面中。

xxx.vue

5.官方推荐的修改方法

./src/store/index.js

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

Vue.use(vuex)

export default new vuex.Store({
  state: {
    //  定义状态
    state1: {
      state1: 'nihao'  //可以是任何对象
    },
  },
  mutations: {
    newState (state , msg) {
      state.state1.state1 = msg;
    }
  }
})

xxx.vue
只修改setState方法，其他全部不变。

6.分模块管理状态仓库

./src/store/index.js

import Vue from 'vue'
import vuex from 'vuex'
import module1 from './module1.js'  
//不同组件的变量建议分不同模块存放，方便管理，建议存放在单独的文件夹中

Vue.use(vuex)

export default new vuex.Store({
  state: {
    state1: {
      state1: 'nihao'  //可以是任何对象
    },
  },
  mutations: {
    newState (state , msg) {
      state.state1.state1 = msg;
    }
  },
  modules: {
    moduleOne: module1,
  }
})

./src/store/module1.js

export default {
    state: {
      item:'testItem'
    }
}

xxx.vue

其他代码可以完全参照之前操作。

computed: {
    modelTest() {
        return this.$store.state.moduleOne.item;
    },
}

参考网站:
http://www.cnblogs.com/wisewrong/p/6344390.html