title: Vue: How to use store with component?
body: <p>//store</p>
  
  <pre><code>export default {
    state: {
      aboutModels: []
    },
    actions: {
      findBy: ({commit}, about)=&gt; {
        //do getModels
        var aboutModels = [{name: 'About'}] //Vue.resource('/abouts').get(about)
        commit('setModels', aboutModels)
      }
    },
    getters: {
      getModels(state){
        return state.aboutModels
      }
    },
    mutations: {
      setModels: (state, aboutModels)=&gt; {
        state.aboutModels = aboutModels
      }
    }
  }
  </code></pre>
  
  <p>//component</p>
  
  <pre><code>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'
    })
  }
  </code></pre>
  
  <p>//view</p>
  
  <pre><code>&lt;div class="about" v-for="about in abouts"&gt;{{about.name}}&lt;/div&gt;
  </code></pre>
  
  <p>//error</p>
  
  <pre><code>vue.js:2532[Vue warn]: Cannot use v-for on stateful component root element because it renders multiple elements:
  &lt;div class="about" v-for="about in abouts"&gt;{{about.name}}&lt;/div&gt;
  
  vue.js:2532[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node. (found in component &lt;About&gt;)
  </code></pre>