简单的Vuex练习的dome

    先通过vue-cli快速搭建项目，再通过npm install 安装vue运行安装包的依赖。

在通过npm install vuex -save安装vuex,安装成功后在src里面创建state文件夹在里面创建store.js文件。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 1// 存放组件之间共享的数据
  },
  mutations: {
    increase (state) {
      state.count++
    },
    jianshao (state) {
      state.count--
    }
  },
  actions: {
    addjia ({commit}) {
      commit('increase')
    },
    addjian ({commit}) {
      commit('jianshao')
    }
  }
})
export default store
/**
* mutations改变state里面的状态也就是值
* actions里面的相当于commit触发的一个方法，将mutations里面的increase方法放到commit里面在组件中调用
* * */

在main.js里面注册；

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/store.js'
Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

然后在自己创建一个vue文件，

html添加两个按钮；

<span>{{count}}</span>
<button @click="add">增加数值</button>
<button @click="addjian">减少数值</button>

js里面写；

<script>

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    add () {
      this.$store.dispatch('addjia')
    },
    addjian () {
      this.$store.dispatch('addjian')
    }
  }
}
/**
 * computed里面调用count起到显示的作用
 * methods里面调用绑定的点击事件再通过this.$store.dispatch('addjia')调用store.js文件里面addjia方法通过里面的commit触发increase
 * */
</script>

然后运行就可以实现简单的加减