vue组件怎么才能根据vuex state的值的改变来进行刷新

Question

一个后台配置的项目，现在有7个路由级的组件(a,b,c,d,e,f,g)，每个界面对应左侧的菜单栏，每个组件都调了几个接口，这些接口有一个入参commoncode是可变的，所以把commoncode放到 vuex state里面，当我在c组件的界面上，然后我全局更改commoncode，该组件重新刷新，或者说执行一下created()。
除了在每个组件里监听commoncode，然后执行created()里面的代码 这个方法，有没有更为简洁的方法？

Answer 1

生命周期created()只会在渲染时执行一次，如果你需要对一个请求多次发起，建议就写在methods中，用方法调用的形式。

*** 只写了主要部分，并为写全 ***

// 定义mixin-code
data: {
    dataList_A: [],
    dataList_B: []
},
methods: {
    handleLoadData(code, type) {
       // 发送请求，将结果赋值dataList_x
       
       // 注意⚠️ （如果不是，则一个即可）
       我觉得你的业务应该是每个commoncode对应返回的数据
       都是各自的，所以在data中定义，需要定义多个对应组件
       的dataList来存放数据，否则一个dataList会造成数据混乱.
       
       type就是每个组件自己定义的一个变量，来区分是来自哪个
       组件的，这样就能一一对应
    }
}

// A组件中使用，其他组件如此
<template>
    ...
    // 使用
    {{dataList_A}}
    
    // html中可能会手动触发调用，如果有额外参数可以自己增加
    <button @click="handleLoadData(code, 'A')">点击</button>
    ...
</template>

<script>
    import codeMixin from 'xx/xx/mixin-code'

    mixins: [codeMixin],
    created() {
        // 组件应该每次都会调用请求获取数据
        // code根据你的业务自己获取
        this.handleLoadData(code, 'A')
    }
</script>