时间戳

首页 > 解决方案 > Vuex 正在重置已设置的状态

vue.js - Vuex 正在重置已设置的状态

问题描述

已经开始玩 Vuex 并且有点困惑。

GET_RECRUITERS每次我加载组件时它都会触发操作，company.vue因此也会进行 api 调用。

例如，如果我打开company.vue=> 导航到user/edit.vuewithvue-router并且他们返回，它将再次调用 action/api（招聘人员根据 Vue-dev-tools 保存在商店中）。

如果我错了，请纠正我 - 如果我再次返回页面，它不应该触发动作/api，从而重置状态，对吗？还是我误解了 Vuex 的意图？

公司.vue

<template>
  <card>

    <select>
      <option v-for="recruiter in recruiters"
              :value="recruiter.id">
        {{ recruiter.name }}
      </option>
    </select>

  </card>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  middleware: 'auth',

  mounted() {
    this.$store.dispatch("company/GET_RECRUITERS")
  },

  computed: mapGetters({
    recruiters: 'company/recruiters'
  }),

}
</script>

公司.js

import axios from 'axios'

// state
export const state = {
  recruiters: [],
}

// getters
export const getters = {
  recruiters: state => { 
    return state.recruiters
  }
}

// actions
export const actions = {
  GET_RECRUITERS(context) {

    axios.get("api/recruiters")
      .then((response) => {
        console.log('API Action GET_RECRUITERS')
        context.commit("GET_RECRUITERS", response.data.data) 
      })
      .catch(() => { console.log("Error........") })
  }

}

// mutations
export const mutations = {
  GET_RECRUITERS(state, data) {
    return state.recruiters = data
  }
}

谢谢！

标签： vue.jsvuexvue-routerstate-management

解决方案

这是预期的行为，因为除非您缓存它，否则每次您路由回它时都会再次创建/安装页面组件。这里有一些设计模式：

  • 将数据加载到只运行一次的App.vue中。

  • 或者，在调用 API 之前检查数据是否尚未加载：

// Testing that your `recruiters` getter has no length before loading data
mounted() {
   if(!this.recruiters.length) {
      this.$store.dispatch("company/GET_RECRUITERS");
   }
}
  • 或者，缓存页面组件，以便在您每次离开和返回时都不会重新创建它。通过使用<keep-alive>组件包装来做到这一点<router-view>：
<keep-alive>
   <router-view :key="$route.fullPath"></router-view>
</keep-alive>

推荐阅读