可以从组件中的VUEX获取特定数据

Question

我可以从vuex获取所有数据，除了一个，让我更惊讶的是，我可以在Chrome中获得数据，只能在Chrome中获得数据。

已经尝试了不同的方法，在localstorage和vuex-persistedstate之间切换，仍然无法弄清楚。

这是我的vuex状态：

state: {
  statusOptions:JSON.parse(localStorage.getItem('optionsStatus')),
},

Axios请求：

axios({
  url: 'http://10.80.101.187:8081/api/directory/presencestatus',
  method: 'POST',
})
  .then((resp) => {
    console.log(resp.data)
    localStorage.setItem('optionsStatus',JSON.stringify(resp.data));
   });

这个。

这就是我从服务器获取数据并将其发送到Vuex的方式。

在控制台中，我可以检查我从服务器中获得数据，也可以在Vuex中看到它，但是它在组件中是空的。

0: {id_ref_catalog: 392, rus_name_catalog: "here"}
1: {id_ref_catalog: 393, rus_name_catalog: "diner"}
2: {id_ref_catalog: 394, rus_name_catalog: "away"}

也要在刷新时从vuex中保存数据

您应该以正确的形式使用vuex。使用突变，动作。将您的初始状态设置为状态：[]然后，您将派遣一个突变，该突变将触发动作，该操作应使用API响应的值将更改对VUEX存储进行。

state: {
  statusOptions: []
}

那么您应该采取动作

mutations: {
    update (state, payload) {
      state.statusOptions = payload
    }
  },
actions: {
getDataFromAPI() {
      return axios({
    url: 'http://10.80.101.187:8081/api/directory/presencestatus',
                        method: 'POST',
                    });
     }

，然后在您的安装方法中，您可以调用

mounted() {
   this.getDataFromAPI().then( resp => { this.$store.commit('update', JSON.stringify(resp.data))})
}

这是一个例子。这不是正确的语法，而是尝试一下。