通过已知 id 访问 vuex 数据

Question

我创建了一个 vuex 存储并存储了几行从远程源获取的数据。数据实际上是来自 mysql table.

的行

数据是这种格式

[{
    "id": "1",
    "property_country": "usa",
    "property_name": "i and m towers",
    "property_stars": "4",
    "property_city": "austin",
    "property_region": "texas",
    "property_type": "serviced partment",
    "date_created": "3563763673",
    "date_updated": "33377363",
    "the_user_id": "1"
}, {
    "id": "2",
    "property_country": "uk",
    "property_name": "eagle towers",
    "property_stars": "5",
    "property_city": "kampala",
    "property_region": "kampala",
    "property_type": "motel",
    "date_created": "3563763673",
    "date_updated": "33377363",
    "the_user_id": "1"
},

我希望能够通过id访问vuex数据，通过id删除，通过id更新

到目前为止我可以访问console.log(this.$store.state.properties[1].property_country);

就像那样。我从循环数据中知道了 id，所以我希望能够使用已知的 id 来执行一些突变。查看 vuex 中数据存储方式的方法是什么？如果我知道行的 id，我如何访问存储在 vuex 中的任何数据？

Answer 1

通过 Id 获取：

this.$store.state.properties.find(property => property.id == 1).property_country

// OR

getById(id) {
  this.$store.state.properties.find(property => property.id == id)
}
getById(1).property_country // "usa"

按 id 移除

removeById(id) {
  this.$store.state.properties.splice(this.$store.state.properties.findIndex(p=>p.id == id), 1)
}

按 ID 更新：

updateById(id, newObject) {
  this.$store.state.properties[this.$store.state.properties.findIndex(p=>p.id == id)] = JSON.parse(JSON.stringyfy(newObject))
}
// here you have to make some logic to make sure the id still makes sense.

更新单个属性

this.$store.state.properties[this.$store.state.properties.findIndex(p=>p.id == 1)].property_country = "NEW_VALUE"

Vuex 方式

// You can always get data from store using this.$store.state
// But to update, change or remove, you need mutations
mutations: {
  removeById(state, id) {
    state.properties.splice(state.properties.findIndex(p=>p.id == id), 1)
  },
  updateById(state, payload) { // payload = {id: 1, newObject = {..]}
    state.properties[state.properties.findIndex(p=>p.id == payload.id)] = JSON.parse(JSON.stringyfy(payload.newObject))
  }
}

// Use like this
this.$store.commit('removeById', 1)
this.$store.commit('updateById', {id: 1, newObject: {...}})

Answer 2

尝试 getter 和 method style access

getters: {
  // ...
  getPropById: (state) => (id) => {
    const {property_country}=state.properties.find(p=> p.id === id)
   
     return property_country;

  }
}

然后像this.$store.getters.getPropById(1)

一样使用它

通过已知 id 访问 vuex 数据

Accessing vuex data by a known id

vue.js

vuex

通过 Id 获取：

按 id 移除

按 ID 更新：

更新单个属性

Vuex 方式