Vuex简单入门1：一个小demo

先贴一个    官方文档   

1. 利用vue-cli 的webpack生成基础项目结构。

2. 然后安装 vuex 用npm包管理工具      npm install vuex --save

3. 建立一个vuex文件夹，建一个store.js文件，并在文件中引入vue和vuex，然后再引用vuex

store.js 内容 ，state 、 mutations 后面会详细写 

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

Vue.use(Vuex)

const state = {
  count: 3
}
const mutations = {
  add (state) {
    state.count++
  },
  reduce (state) {
    state.count--
  }
}
export default new Vuex.Store({
  state,
  mutations
})

4. 在组件中新建一个count.vue 内容如下 ，主要是从$store中取需要的东西

<template>
  <div>
    <h2>{{msg}}</h2><hr/>
    <h3>{{$store.state.count}}</h3>
    <p>
      <button @click="$store.commit('add')">+</button>
      <button @click="$store.commit('reduce')">-</button>
    </p>
  </div>
</template>

<script>
import store from '@/vuex/store'
export default {
  data () {
    return {
      msg: 'hello Vuex'
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  store
}
</script>

<style scoped>

</style>

5. 在router/index.js中给count.vue 配置一下路由， 一个加减count 小demo就OK了