使用vuex传递参数之后触发目标监听事件

首先，我们使用vuex来进行参数传递的情景通常都是全局的范围，也就是不方便直接使用 ‘：’传递参数的时候，但是这时候有一种情景，就是我们的目的是传递参数之后，在接收到参数后，触发一个方法。
按照通常的情况，使用‘：’传递参数之后，使用watch监听参数改变，然后调用方法就行了，但是使用vuex的时候怎么监听呢？
我们使用vuex获取参数的时候是需要先调用一下getter方法

this.$store.getters. xxxx

这个可不好监听呢。还好，我们的vue提供了另一个属性：computed，很多人把computed和watch经常会混淆在一起，其实是两个作用不同的属性，具体的这里也就不说了，网上应该很多他们的区别，然后是现在，怎么使用这个属性呢？
首先，我先弄一个简单的vuex.store文件：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //这里放全局参数

    demoValue:{}

  },

  mutations: {

    //这里是set方法

    setDemoValue(state,demoValue){

            state.demoValue = demoValue

        }

  },

    getters: {

    //get方法

        getDemoValue: state => state.demoValue

    },

  actions: {


  },

  modules: {


  }

})

现在，我们可以通过使用：

this.$store.commit('setDemoValue', value);    

this.$store.getters. getDemoValue

两个方法来进行传值和取值了，接下来我们需要实现监听demoValue值得改变：

export default () {
   computed: {
    demoValue() {
    //computed是计算属性，state里面的demoValue改变之后，就会进行一次计算，并返回计算值到对应的参数中
     return this.$store.state.demoValue;
    }
   },
   watch: {
    //监听属性，在computed计算属性更改之后会触发参数值的改变，所以能够监听到
    demoValue(newValue, oldValue) {
     console.log(`参数改变了：`，this.$store.getters. getDemoValue)；
    // TODO  这里会在commit之后触发，然后做后续的操作
    }
   }
  }

现在我们在使用

this.$store.commit('setDemoValue', value);   

修改参数的时候就会触发这个监听事件了。