Vue 里用 vuex做组件之间的数据双向绑定

监听 Vuex 里的数据变化 mapState

    
    
import Vue from 'vue';
import Vuex from 'vuex';
import { mapState } from 'vuex'

Vue.use(Vuex);
Vue.config.productionTip = false;

const homeComp02 = {
  template: `<div>{{ count }}</div>`,
  computed: {
    ...mapState({
      count: state => state.number.count,
    })
  },
}

const homeComp = {
  components: { homeComp02 },
  template: `<div>{{ count }}
  <homeComp02 />
  </div>`,
  computed: {
    ...mapState({
      count: state => state.number.count,
    })
  },
}
const number = {
  state: {
    count: 0,
  },
  getters: {
    addCount: state => {

      return state.count + 1
    },
  },
  mutations: {},
  actions: {}
}
const store = new Vuex.Store({
  modules: {
    number
  },
});
const App = {
  components: { homeComp },
  template: `
    <div >
      <homeComp></homeComp>
    </div>
  `,
  create() {
    this.$store.commit('setCount', 2);
  },
};

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')