Question

我可以从vuex中获取所有数据，但只有一个，而令我惊讶的是我只能在Chrome中获取数据。

已经尝试了不同的方法，在本地存储和vuex持久状态之间切换，仍然无法弄清。

这是我的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));
   });

this。$ store.state.statusOptions尝试捕获组件中的数据

这就是我从服务器获取数据并将其发送到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-persistedstate

Answer 1

您应该以正确的形式使用vuex。使用突变，一个动作。将您的初始状态设置为statusOptions：[] 然后您将调度一个突变，该突变将触发一个操作，该操作应使用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',
                    });

     }

然后在您的mount（）方法中，可以调用

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

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

无法从组件中的vuex获取特定数据

1 个答案: