如何从 Vuex 存储中检索和操作数据

Question

我尝试使用 Vue 制作门配置器。

首先，我将 DB 中的组件数组放入 Vuex 存储 .get('/api/furnitura') 这为我提供了可用于不同类型门的所有组件的数组。 铰链、把手、锁等。 然后我将有几个 Vue 组件。每个组件都是一个特定门类型的配置器。

我在 Vue 文档中发现，可以像这样从应用程序的每个点访问 Vuex 存储变量

    computed: {
      getFurnitura(){
         return this.$store.state.furnitura.all
      }
    },

但我想在 Vue 中操作存储变量。 类似的东西 Take all from this.$store.state.furnitura.all where type=SOMETYPE and type=ANOTHERTYPE

对于一个计算器，我只想从 this.$store.state.furnitura.all 中检索几种类型的铰链和把手。对于另一个不同的东西。 然后我想在选择字段中使用它们。例如，在 DB 中，我在 DB 中有大约 50 个铰链，对于一种类型的门，我只需要检索 5 个，另一种只需要 3 个，依此类推。 对每个选择字段进行 API 调用对我来说似乎不合理

<select name="hinge_selected" v-model="hinge_selected">
<option v-for="option in hinges" :value="option">
  {{ option.name }}
</option>
</select>

<select name="handle_selected" v-model="handle_selected">
<option v-for="option in handles" :value="option">
  {{ option.name }}
</option>
</select>

and so on

这是我的代码

资源\js\app.js

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.Vue = require('vue');
import store from './store';
Vue.component('modalform', require('./components/modalform.vue').default);
Vue.component('calc-dush-door', require('./components/calculators/dush-door.vue').default);
Vue.component('calc-interior-door', require('./components/calculators/interior-door.vue').default);
Vue.component('calc-sliding-door', require('./components/calculators/sliding-door.vue').default);

const app = new Vue({
    el: '#app',
    store,
    data: {    },
    directives: {   },
    computed: {
      getFurnitura(){
         return this.$store.state.furnitura.all
      }
    },

    methods: {   },

    mounted() {
        console.log("Vue ROOT instance mounted");
        this.$store.dispatch('furnitura/getFurnitura');
    }
});

资源\js\store\index.js

import Vue from 'vue';
import Vuex from 'vuex';

import furnitura from './modules/glass';
import furnitura from './modules/furnitura';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    glass,
    furnitura
  }
});

resources\js\store\modules\furnitura.js

import axios from 'axios';

const state = {
  all: []
};
 
const getters = {  };
 
const mutations = {
  SET_FURNITURA (state, furnitura) {
    state.all = furnitura;
  }
};

const actions = {
  getFurnitura (context) {
    axios
      .get('/api/furnitura') // this gives me result of Furnitura::all();
      .then(response => {
        context.commit('SET_FURNITURA', response.data.records)
      });
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

resources\js\store\components\calculators\sliding-door.vue

<template>
<div>
<select name="hinge_selected" v-model="hinge_selected">
<option v-for="option in hinges" :value="option">
  {{ option.name }}
</option>
</select>

<select name="handle_selected" v-model="handle_selected">
<option v-for="option in handles" :value="option">
  {{ option.name }}
</option>
</select>

</div>
</template>


<script>
    export default {
        name: "SlidingDoorCalc",

        data: function () {
          return {
            width: 600,
            height: 2000,
            hinge_selected: [],
            handle_selected: [],
          }
        },


        computed: {     
          getFurnitura(){
             return this.$store.state.furnitura.all
          }
        },

        methods: {        },
        mounted() {        },

    }
</script>

Answer 1

您可以使用常规的组件方法，例如：

{
    // ...
    methods: {
        getHinges(filterParameter1, filterParameter2) {
            // do your filtering and sorting on
            // this.$store.state.furnitura.all
        },
        getHandles(filterParameter1) {
            // same as with getHinges
        }
    }
}

然后，在您的组件中，您将其称为：

<select name="hinge_selected" v-model="hinge_selected">
    <option v-for="option in getHinges('some_parameter')" :value="option">
        {{ option.name }}
    </option>
</select>

如果要在多个方法中使用相同的过滤逻辑，请使用method-style-access Vuex getters，如：

getters: {
    // ...
    getHinges: (state) => (filterParameter1, filterParameter2) => {
        // filter your state.furnitura.all here
    }
}

并在您的组件方法中调用此类 getter：

{
    // ...
    methods: {
        getHinges(filterParameter1, filterParameter2) {
            return this.$store.getters.getHinges(filterParameter1, filterParameter2);
        },
    }
}