vuex第一次使用成功记录

1、第一步，我们在 vue.js 2.0 开发环境中安装 vuex :
npm install vuex --save


2、第二步 , 在 main.js 中加入 :

import Vuex from 'vuex'

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

3、第三步 , 在实例化 Vue对象时加入 store 对象 :

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

4、第四步，新建一个vue文件，命名为 StorageDemo.vue, 内容如下：

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

<script>
export default {
  name: 'StorageDemo',
  data () {
    return {
      count: 0
    }
  },
  // actions
  methods: {
    increment () {
      // 递增
      this.$store.commit('increment')
      // 赋值
      this.count = this.$store.state.count
    },
    decrement () {
      // 递减
      this.$store.commit('decrement')
      // 赋值
      this.count = this.$store.state.count
    }
  }

}
</script>

5、第五步，需要在路径 src/router/ 下的路由文件 index.js 里面添加路由，内容如下：

import StorageDemo from '@/components/StorageDemo'

{
  path: '/StorageDemo',
  name: 'StorageDemo',
  component: StorageDemo
},