vuex缓存数据的正确方法 [英] Correct way to cache data in vuex

问题描述

我正在尝试将数据异步加载到静态但被多个路由使用的 vuex 中.我只想获取数据一次，并且仅在访问需要它的路由时才获取.这就是我目前正在做的事情，但我不确定这是否是正确的约定，或者是否有更好/更 Vueish 的方式.

//store.js导出默认新 Vuex.Store({状态: {_myData:空，},吸气剂:{我的数据:(状态)=>新承诺((解决，拒绝)=> {如果(状态._myData){解决(state._myData)；} 别的 {axios.get('http://myData.com/').then(myData => {state._myData = myData;解决(state._myData)；});}})}});//ProfilePage.vue<模板><div>{{myData}}</div></模板><脚本>导出默认{数据() {返回 {我的数据:空}},异步创建(){this.myData = 等待 this.$store.getters.myData;}}//关于Page.vue<模板><div>{{myData}}</div></模板><脚本>导出默认{数据() {返回 {我的数据:空}},异步创建(){this.myData = 等待 this.$store.getters.myData;}}

解决方案

有一种正确的方法可以做你想做的事，但它不是你做的方式.Vue 对不要在变异处理程序之外改变 vuex 存储状态"非常严格.

这意味着你应该只通过改变来改变存储状态，然后只使用你的 getter 来获取数据.您还应该使用一个操作来提交更改.所以对于你正在尝试做的事情，你应该像这样尝试.

//AnyPage.vue<模板><div>{{myData}}</div></模板><脚本>导出默认{数据() {返回 {我的数据:空}},异步创建(){if(this.$store.state._myData === null) {等待 this.$store.dispatch('getData')}this.myData = this.$store.getters.myData;}}

然后在您的商店中:

//store.js导出默认新 Vuex.Store({状态: {_myData:空，},吸气剂:{我的数据:(状态)=>state._myData,}突变:{SET_DATA(状态，数据){state._myData = 数据}}动作:{获取数据({上下文}){axios.get('http://myData.com/').then(res => {context.commit('SET_DATA', res)})}}}});

您应该仔细阅读文档，其中涵盖了所有内容.>

I am trying to asynchronously load data into vuex that is static but is used by multiple routes.I only want to fetch the data once and only when a route that needs it is visited. This is what I'm currently doing but I'm not sure if this is the correct convention or if there is a better/more Vueish way.

// store.js

export default new Vuex.Store({
  state: {
    _myData: null,
  },
  getters: {
    myData: (state) => new Promise((resolve,reject) => {
      if(state._myData){
        resolve(state._myData);
      } else {
        axios.get('http://myData.com/')
        .then(myData => {
          state._myData = myData;
          resolve(state._myData);
        });
      }
    })
  }
});

// ProfilePage.vue

<template>
 <div>{{myData}}</div>
</template>

<script>
export default {
  data() {
    return {
      myData:null
    }
  },
  async created(){
   this.myData = await this.$store.getters.myData;
  }
}
</script>

// AboutPage.vue

<template>
 <div>{{myData}}</div>
</template>

<script>
export default {
  data() {
    return {
      myData:null
    }
  },
  async created(){
   this.myData = await this.$store.getters.myData;
  }
}
</script>

解决方案

There is a correct way to do what you want but it is not the way you are doing it. Vue is quite strict on "Do not mutate vuex store state outside mutation handlers."

This means you should only alter the store state through a mutation, then use your getter only to get the data. You should also use an action to commit the mutation. So for what you are trying to do you should try it like this.

// AnyPage.vue

<template>
 <div>{{myData}}</div>
</template>

<script>
export default {
  data() {
    return {
      myData:null
    }
  },
  async created(){
    if(this.$store.state._myData === null) {
      await this.$store.dispatch('getData')
    }
    this.myData = this.$store.getters.myData;
  }
}
</script>

then in your store:

// store.js

export default new Vuex.Store({
  state: {
    _myData: null,
  },
  getters: {
    myData: (state) => state._myData,
  }
  mutations: {
    SET_DATA(state, data) {
      state._myData = data
    }
  }
  actions: {
    getData({ context }){
        axios.get('http://myData.com/')
        .then(res => {
          context.commit('SET_DATA', res)
        })
      }
    }
  }
});

You should read up in the docs which covers it all pretty well.

这篇关于vuex缓存数据的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！