Vue: Cách sử dụng cửa hàng với thành phần?

Question

// cửa hàng

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 
    } 
    } 
} 

// thành phần

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' 
    }) 
} 

// xem

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

// lỗi

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

Bạn đang lập bản đồ thu khí nhà nước Vuex của bạn và hành động chính xác. Vấn đề của bạn là vấn đề khác khi thông báo lỗi của bạn nêu rõ ...

Trong mẫu thành phần của bạn, bạn không thể sử dụng chỉ thị v-for trên phần tử gốc. Ví dụ này không được phép vì thành phần của bạn có thể có nhiều yếu tố gốc:

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

thay vì làm điều đó theo cách này:

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

** * typo cố định trong mẫu thẻ **