Vue.js Vue：如何使用组件存储？

//贮藏

//组成部分

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

//看法

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

{{about.name}

//错误

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

vue.js:2532[vue warn]：无法在有状态组件根元素上使用v-for，因为它呈现多个元素：
{{about.name}
vue.js:2532[vue warn]：从渲染函数返回多个根节点。渲染函数应返回单个根节点。（在组件中找到）

您正在正确映射Vuex状态获取程序和操作。正如错误消息所述，您的问题是其他问题

在组件模板中，不能对根元素使用

v-for

指令。例如，这是不允许的，因为您的组件可以有多个根元素：

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

{{about.name}

而是这样做：

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

{{about.name}

***修复了模板标记中的打字错误**

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