Question

我需要通过路线的ID从商店获取对象。 ID取决于路线，我可以正确获取。该功能有问题。也许我应该使用过滤功能？

    props: ['id'], // my props
    computed: { // computed property
      product () { // function name
        const id = this.id; // getting id
        return this.$store.getters.productById(id) // getting object from store
      }
    }

    state: { // state 
      products: [ //products array
        {
          id: 1, // id
          title: 'Lenovo Legion Y520', // title
          vendor: 'Lenovo', // vendor
          color: 'black', // color
          material: 'metal/plastic', // material
    },
    {
          id: 2, // id
          title: 'Asus FX503VD', // title
          vendor: 'Asus', // vendor
          color: 'white', // color
          material: 'plastic', //plastic
    },
    {
          id: 3, // id
          title: 'ASUS TUF Gaming FX504GD', // title
          vendor: 'Asus', // vendor
          color: 'black', // color
          material: 'metal/plastic' //material
      }
    ]

    getters: { // getters
      productById (state) { // function
      return productId => { // product by id
        return state.products.find(product => product.id === productId)
        }
      }
    }

// route settings
{
  path: '/product/:id', // route path
  props: true, //enabled props
  name: 'product', // route name
  component: Product // component name
}

// main js importing plugins and Vue

import router from './router' // import router
import store from './store' // import store
import Vuetify from 'vuetify' // import vuetify

Vue.use(Vuetify); // use vuetify plugin

Vue.config.productionTip = false; // false

new Vue({ // new class instance
  el: '#app', // el name
  router, // enabled routing
  store, // enabled store
  components: { App }, // component name
  template: '<App/>' // template name
});

也许我传递id是不合适的方式，这是$ store.getters.productById（id）吗？我不知道该如何处理

Answer 1

State和getters-它们是不同的对象。您必须将它们分开。将右括号放在"]"

之后

Answer 2

也许不要在productById吸气剂中使用strict equality comparison。

如果在函数内部调试，则可以看到：

console.log(typeof product.id) #=> number
console.log(typeof productId)  #=> string

尝试使用product.id == productId而不是product.id === productId

如何通过id Vue获取对象表单存储

2 个答案: