Vue中监听vuex数据变化（a组件修改vuex内数据，b组件内触发相应函数）

写了一个新闻类的小网站，客户提出的要求，必须使用导航栏。
因为新闻分类太多，我最初的想法是做成一个类似掌阅官网的导航模式。在index组件内渲染分类导航。

这样的话，就不用在home组件内头部渲染导航条。

但是，根据种种原因，必须设计成home组件头部使用导航的形式。

一开始，我是不太想要使用vuex的。但是经过了小半天的踩坑，一直没有做到自己想要的结果。最后还是选择了使用vuex。

在安装vuex的时候，遇到了一个安装时的问题。

看到此类问题，我就十分头疼。果断npm uninstall vuex ，把vuex卸载。回到脚手架内重新下载，说来也 奇怪，在脚手架内一发入魂，直接下载成功。

懒得去想因为啥了，开始怼需求了

首先，设置vuex，在脚手架内安装vuex后，会在根目录下生成一个store.js文件。

// vuex配置文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 全局共享数据
  state: {

  },
  // 变更state内数据
  mutations: {

  },
  actions: {}
})

相应的，mian.js内，脚手架也做好相关文件的引用配置

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

下面就是要分析，自己需要进行的操作了。
首先，要在state: { },内，添加自己需要的全局参数。
其次，在mutations: { }内，添加自己需要修改全局参数的函数。

export default new Vuex.Store({
  // 全局共享数据
  state: {
    // 首页导航栏分类导航点击查询文章
    indexSearchClass: '123'
  },
  // 变更state内数据
  mutations: {
    // id是你要传递的参数
    changeSearchClass(state,id){
      state.indexSearchClass=id
    }
  },
  actions: {}
})

然后，在a组件，设置点击导航栏触发的函数，在函数内调用修改全局参数的函数，进行参数值的修改

<script>
	import {mapState,mapMutations} from 'vuex'
	methods: {
	  // 保存链接激活状态
      saceNacstate(activePath) {
      window.sessionStorage.setItem('activeIndex', activePath)
      // 调用store.js内的函数
      this.$store.commit('changeSearchClass',activePath)
      this.$router.push({ path: this.redirect || '/' }, onComplete => { }, onAbort => { })
    },
	}
</script>

最后，在b组件内，监听全局参数的变化，参数变化后调用b组件内需要触发的函数

<script>
	import {mapState,mapMutations} from 'vuex'
	computed:{
    	listData(){
      		return this.$store.state.indexSearchClass
    	}
  	},
  	watch:{
   		listData (newVal, oldVal) {
   			// 数据变化后，调用b组件内的函数
     		this.getIndexArticles()
   		}
  	},
</script>

最后，导航栏点击相关分类，实现index页面内查询相关信息完美实现