關(guān)于Vuex的使用方法

一個很簡單的功能，子組件有個計數(shù)count，父組件中有+和-按鈕控制count計數(shù)，以下是代碼

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

回答

編輯回答

若相惜

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

2017年5月2日 11:49

編輯回答

挽歌

因為testHeader已經(jīng)是一個對象了，new Vuex.Store({testHeader})就相當(dāng)于對象里面套了個對象，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的解構(gòu):
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 
})

2018年9月5日 16:33

編輯回答