Hello,Vuex!

使用Vuex管理和获取最新数据

最新推荐文章于 2024-01-03 15:55:21 发布

原创最新推荐文章于 2024-01-03 15:55:21 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

学习笔记专栏收录该内容

70 篇文章

订阅专栏

这个示例展示了如何在Vue应用中使用Vuex状态管理库来存储和更新最新的年份数据。通过调用axios的后台接口获取最新的年份，并在组件中监听数据变化，实现页面跳转时传递查询参数。

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import backend from '../axios/backend';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    latestYear: 2020,
  },
  mutations: {
    latestYearUpdated(state, y) {
      state.latestYear = y;
    },
  },
  actions: {
    async getLatestYear(store) {
      let resp = await backend.get('/datas/years/latest');
      if (resp.status === 200) {
        let latestYear = resp.data.latestYear;
        console.log(resp.data, latestYear);
        store.commit('latestYearUpdated', latestYear);
      }
    },
  },
  modules: {},
});

hello.vue

import { mapState, mapActions } from 'vuex';
export default {
  name: 'Search',
  data: () => {
    return {
      code: '',
    };
  },
  computed: {
    ...mapState(['latestYear']),
  },
  methods: {
    search() {
      let code = this.code;
      let year = this.latestYear;
      let params = { code };
      let query = { year };
      this.$router.push({ name: 'Student', params, query });
    },
    ...mapActions(['getLatestYear']),
  },
  mounted() {
    this.getLatestYear();
  },
};