1.store.js

 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

export default new Vuex.Store({
  state
})

2.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 App from './App'
import router from './router'
import store from './vuex/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.vue

 

<template>
  <div class="hello">
    <h1>{{ $store.state.count }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: ''
    }
  },
}
</script>

注意掉坑里呀，1.store.js中 引入vue,和vuex的时候 后面 vue 和 vuex 要小写 要是不小心写成 

import Vue from 'Vue'
import Vuex from 'Vuex'

在 第3步用的的时候 就会报错 $store is not defined。

1.store.js

 

import Vue from 'vue' // 后面的vue 一定要小写
import Vuex from 'vuex' // 后面的vuex 一定要小写

Vue.use(Vuex)

const state = {
  count: 0
}

export default new Vuex.Store({
  state
})