कुछ महीनों के बाद vuex का उपयोग करने के बाद, मुझे यकीन नहीं है कि मैं इसे सही तरीके से उपयोग कर रहा हूं।

मेरा मुख्य प्रश्न है, मुझे राज्यों को कैसे संशोधित करना चाहिए?

उदाहरण के लिए :

मेरे पास संसाधन (पोस्ट) बनाने और संपादित करने का एक दृश्य है। किसी पोस्ट को बनाने या अपडेट करने के लिए मुझे कुछ डेटा लाने के लिए कुछ API कॉल की आवश्यकता है (जैसे सभी उपलब्ध श्रेणियों और टैग की सूची)। मुझे उन्हें कहां स्टोर करना चाहिए? vuex/modules/post.js? में या vuex/modules/tags.js जैसे समर्पित मॉड्यूल में और vuex/moduels/categories.js?

मैं vuex/modules/post.js में पोस्ट के टैग और श्रेणियां संग्रहीत कर रहा हूं लेकिन संसाधन को संशोधित करने के लिए आवश्यक सभी अन्य संसाधनों के बारे में कैसे (जैसे सभी उपलब्ध टैग और श्रेणियों का चयन किया जाना है) उपयोगकर्ता द्वारा)?

पदों की सूची के बारे में कैसे? क्या मुझे पोस्ट की सूची को vuex/modules/post में या एक समर्पित vuex/modules/posts-list.js में स्टोर करना चाहिए?

क्या प्रत्येक दृश्य का अपना मॉड्यूल होना चाहिए?

// vuex/modules/post.js

import Vue from 'vue';
import Axios from 'axios'

export default {
    namespaced: true,
    state: {
        title: null,
        slug: null,
        tags: [],
        categories: [],
        meta: {},
        excerpt: null,
        content: null,
        comments: []
    },
    mutations: {
        SET_TITLE(state, title) {
            state.title = title;
        },
        SET_SLUG(state, slug) {
            state.slug = slug;
        },
        SET_EXCERPT(state, excerpt) {
            state.excerpt = excerpt;
        },
        SET_CONTENT(state, content) {
            state.excerpt = content;
        },


        ADD_TAG(state, tag) {
            state.tags.unshift(tag)
        },
        REMOVE_TAG(state, index) {
            Vue.delete(state.tags, index);
        },
        SET_TAGS(state, tags) {
            state.tags = tags;
        },


        ADD_CATEGORY(state, category) {
            state.categories.unshift(category)
        },
        REMOVE_CATEGORY(state, index) {
            Vue.delete(state.categories, index);
        },
        SET_CATEGORIES(state, categories) {
            state.categories = categories;
        },


        ADD_META(state, {key, value}) {
            Vue.set(state.meta, key, value)
        },
        REMOVE_META(state, key) {
            Vue.delete(state.meta, key);
        },
        UPDATE_META(state, {key, value}) {
            state.meta[key] = value;
        },
        SET_META(state, meta) {
            state.meta = meta;
        }
    },
    actions: {
        save({state}) {
            Axios.post('http://myapi.com/posts', state);
        },
        async load({commit}, id) {
            const {data} = await Axios.get(`http://myapi.com/posts/${id}`);
            commit('SET_TITLE', data.title);
            commit('SET_SLUG', data.slug);
            commit('SET_EXCERPT', data.excerpt);
            commit('SET_CONTENT', data.content);
            commit('SET_TAGS', data.tags);
            commit('SET_CATEGORIES', data.categories);
            commit('SET_META', data.meta);
        }
    }
}
0
Mohammad Mirzaee 26 जुलाई 2019, 11:23

1 उत्तर

सबसे बढ़िया उत्तर

यह पूरी तरह आप पर निर्भर है। मैं समर्पित मॉड्यूल में सभी डोमेन संबंधित डेटा (जैसे पोस्ट टैग, श्रेणियां, पोस्ट स्वयं) संग्रहीत करूंगा। लेकिन अगर मेरे पास एक और डोमेन था (उदाहरण के लिए उत्पाद) तो मैं एक और मॉड्यूल (उत्पाद.जेएस) बनाउंगा जिसमें अपने टैग, श्रेणियां इत्यादि होंगे।

Vuex नेमस्पेस्ड मॉड्यूल के लिए धन्यवाद, यह स्पष्ट होगा कि आप कौन से टैग एक्सेस करना चाहते हैं:

// get post tags
this.$store.getters["post/tags"];
{ ...mapGetters("post", ["tags"]) }

// get products tags
this.$store.getter["products/tags"];
{ ...mapGetters("products", ["tags"]) }
2
Andrew Vasilchuk 26 जुलाई 2019, 11:43