Vue: Jak korzystać ze sklepu z komponentem?

Question

// sklep

export default { 
    state: { 
    aboutModels: [] 
    }, 
    actions: { 
    findBy: ({commit}, about)=> { 
     //do getModels 
     var aboutModels = [{name: 'About'}] //Vue.resource('/abouts').get(about) 
     commit('setModels', aboutModels) 
    } 
    }, 
    getters: { 
    getModels(state){ 
     return state.aboutModels 
    } 
    }, 
    mutations: { 
    setModels: (state, aboutModels)=> { 
     state.aboutModels = aboutModels 
    } 
    } 
} 

// komponent

import {mapActions, mapGetters} from "vuex"; 

export default { 
    name: 'About', 
    template: require('./about.template'), 
    style: require('./about.style'), 
    created() { 
    document.title = 'About' 
    this.findBy() 
    }, 
    computed: mapGetters({ 
    abouts: 'getModels' 
    }), 
    methods: mapActions({ 
    findBy: 'findBy' 
    }) 
} 

// widok

<div class="about" v-for="about in abouts">{{about.name}}</div> 

// błąd

vue.js:2532[Vue warn]: Cannot use v-for on stateful component root element because it renders multiple elements: 
<div class="about" v-for="about in abouts">{{about.name}}</div> 

vue.js:2532[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node. (found in component <About>) 

Answer 1

Jesteś mapowanie swoje pobierające państwowe Vuex i akcja poprawnie. Twój problem jest inny, ponieważ komunikat o błędzie stwierdza ...

W szablonie komponentu nie można użyć dyrektywy v-for dla elementu głównego. Na przykład nie jest to dozwolone, ponieważ składnik może mieć wiele elementów root:

<template> 
    <div class="about" v-for="about in abouts">{{about.name}}</div> 
</template> 

zamiast zrobić to w ten sposób:

<template> 
    <div> 
     <div class="about" v-for="about in abouts">{{about.name}}</div> 
    </div> 
</template> 

** * poprawiono literówkę w szablon **