vuex出错

Question

App.vue
<template>
  <div id="app">
      <p>{{count}}</p>
      <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
      </p>
  </div>
</template>

<script type="text/ecmascript-6">

</script>

<style lang="stylus" rel="stylesheet/stylus">
  #app
    font-family: 'Avenir', Helvetica, Arial, sans-serif
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-align: center
    color: #2c3e50
    font-size : 20px
    line-height 30px
    margin-top: 60px
    background-color : yellow
</style>

main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'

Vue.config.productionTip = false
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  computed: {
    count () {
      return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
      store.commit('decrement')
    }
  }
})

Answer 1

简单来说，就是代码块位置不对。。。
参考：Vue-单文件组件
另外可参考一下vue-cli的template~

下面这部分写在main.js中：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({

state: {
  count: 0
},
mutations: {
  increment: state => state.count++,
  decrement: state => state.count--
}
})

这部分写在App.vue中：

export default{

computed: {
  count () {
    return store.state.count
  }
},
methods: {
  increment () {
    store.commit('increment')
  },
  decrement () {
    store.commit('decrement')
  }
}