vuex的动态数据和方法的共享

前言

在做vue单页面应用项目的过程中，有时候我们需要全局共享一个后台请求的数据，甚至还需要通过这个请求过来的数据进行一些计算。而我们常用的做法是，哪个页面需要就去请求一次这个数据，假如这个数据多处使用的时候，那么我们就需要维护多个请求，这样做好吗？这不好，这只会增加项目的代码量和维护难度。那我们要怎么去解决这个问题呢？而vuex刚好就是为此而生吧

需求

首先我们模拟一个需求：

• 1、在A组件中，需要使用职位数据用于select选择；
• 2、在B组件中，需要通过职位编号code获取职业名称name；
• 3、A组件和B组件在不同的页面

所以我们的代码需要实现的功能：

• 1、通过接口请求获取动态数据存放在state里边；
• 2、通过动态获取的数据进行计算得到其name
• 3、浏览器刷新时，在对应的页面都能及时重新发起请求获取数据

代码实现

vuex部分的代码

import Vue from 'vue';
import Vuex from 'vuex';
import { getJobs } from '@/api';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 职位数据
    jobs: []
  },
  getters: {
    // 根据职位code获取职位名
    getJobName: state => {
      return code => {
        let item = state.jobs.filter(item => item.code === code);
        if (item.length > 0) {
          return item[0].label;
        }
        return '';
      };
    }
  },
  mutations: {
    SET_JOBS: (state, jobs) => {
      state.jobs = jobs;
    }
  },
  actions: {
    getJobsData({ commit }) {
      // 如果有数据就不发起请求，否则发起请求
      // 在当前页面刷新时需要用到
      if (state.jobs.length > 0) {
        return;
      }
      getJobs().then(res => {
        const jobs = res.data.map(el => {
          return {
            label: el.name,
            value: el.code
          };
        });
        commit('SET_JOBS', jobs );
      });
    }
  }
});

export default store;

A组件

<template>
	<div>
		{{getJobName('code')}}
	</div>	
</template>

import { mapGetters } from 'vuex';

export default {
  name: 'A',
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters({
      getJobName: 'getJobName',
    }),
  },
  mounted() {
    // 页面刷新时重新获取 
	this.$store.dispatch('getJobsData');
  },
  methods: {
  },
};
</script>

B组件

<template>
	<div>
		 <select>
		 	<option v-for="item in jobs" :key="item.code" :value="item.value" >
		 	{{item.label}}
		 	</option>
		 </select>
	</div>	
</template>

import { mapState} from 'vuex';

export default {
  name: 'B',
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      jobs: (state) => state.jobs,
    }),
  },
  mounted() {
    // 页面刷新时重新获取 
	this.$store.dispatch('getJobsData');
  },
  methods: {
  },
};
</script>

总结

vuex的数据功能很强大，既可以实现动态数据共享也可以实现依托动态数据的方法共享。动态数据发生变化时，getters中的方法也会及时响应对页面上的数据进行处理。