Vuex 正在重置已经设置的状态

Question

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

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

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

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

company.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>

company.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
  }
}

谢谢！

Answer 1

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

加载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>

Vuex 正在重置已经设置的状态

Vuex is resetting already set states

state-management

vue.js

vue-router

vuex