vue中使用vuex实现调用目标页面的方法

配置vuex   

// Vuex store配置
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

当前页配置

// 页面配置
// App.vue
<template>
  <div>
    <MyPage />//目标页面
  </div>
</template>

<script>
import MyPage from './MyPage.vue';

export default {
  components: {
    MyPage//把目标页面自定义为控件
  }
}
</script>

目标页面接收数据

// 页面组件配置
// MyPage.vue
<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: this.$store.state.count
    };
  },
  watch: {  //'$store.state.count'  新建的store的取count的路径
    '$store.state.count': function(newCount, oldCount) {
      console.log(`Count changed from ${oldCount} to ${newCount}`);
      // 在这里可以执行相应的操作
    }
  }
}
</script>