关于Vuex的使用方法

Question

一个很简单的功能，子组件有个计数count，父组件中有+和-按钮控制count计数，以下是代码

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueLazyLoad from 'vue-lazyload'
import infiniteScroll from 'vue-infinite-scroll'
import {currency} from './util/currency'
import store from './store'

Vue.config.productionTip = false

Vue.filter("currency",currency);

Vue.use(infiniteScroll)
Vue.use(VueLazyLoad,{
  loading:"/static/loading-svg/loading-bars.svg"
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import testHeader from './testHead'

Vue.use(Vuex)

export default new Vuex.Store({
   testHeader
})

store/testHeader.js

const state = {
    count:0
}

const mutations = {
    increment (state) {
        state.count ++;
    },
    decrement (state) {
        state.count --;
    }
}

export default{
    state,
    mutations
}

VuexTest.vue(父组建)

<template>
    <div>
        <test-head></test-head>
        <a href="javascript:;" class="btn btn--m" @click="increment">+</a>
        <a href="javascript:;" class="btn btn--m" @click="decrement">-</a>
    </div>
</template>
<script>
import testHead from '@/components/head'
export default {
  data () {
      return {

      }
  },
  components : {
      testHead
  },
  methods : {
      increment () {
          this.$store.commit("increment");
      },
      decrement () {
          this.$store.commit("decrement");
      }
  }
}
</script>

head.vue(子组件)

<template>
    <div>
        <span>{{count}}</span>
    </div>
</template>
<script>
export default {
  data () {
      return {

      }
  },
  computed:{
      count () {
          return this.$store.state.count;
      }
  }
}
</script>

这样写无法获取this.$store.state.count

Answer 1

使用了modules后，state的取值方式为this.$state.[modulesName].count

Answer 2

因为testHeader已经是一个对象了，new Vuex.Store({testHeader})就相当于对象里面套了个对象，store/index.js里面有个引入错误：

import Vue from 'vue'
import Vuex from 'vuex'
import testHeader from './testHeader'//是testHeader不是testHead吧

Vue.use(Vuex)
export default new Vuex.Store(testHeader)

---

或者用es6的解构:
testHeader.js

export const state = {
    count:0
}

export const mutations = {
    increment (state) {
        state.count ++;
    },
    decrement (state) {
        state.count --;
    }
}

export default{
    state,
    mutations
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import testHeader from './testHeader'
import { state, mutations } from './testHeader'

Vue.use(Vuex)
export default new Vuex.Store({ 
  state,
  mutations 
})