vuex 学习足迹

vuex(基于vue-cli脚手架)

安装:
vuex ===> npm install vuex --save

1. 在src文件夹创建store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
	const mutations = {
	  add(state){
	    state.count ++
	  },
	  reduce(state){
	    state.count --
	  }
}
export default new Vuex.Store({
	state,
	mutations
})

2.main.js中引入store.js

//...
import store from './store.js'
//...
new Vue({
  store,//子页面使用 this.$store.state.count取值
  render: h => h(App),
}).$mount('#app')

3.应用 app.vue

<template>
  <div id="app">
    <div>{{count}}</div>
    <div class="btns">
      <button @click="add">+</button>
      <button @click="reduce">-</button>
    </div>
  </div>
</template>
<script>
	export default {
	  name: 'app',
	  components: {},
	  computed: {
	    count() {
	      return this.$store.state.count
	    }
	  },
	  methods: {
	    add(){
	      this.$store.commit('add')
	    },
	    reduce(){
	      this.$store.commit('reduce')
	    }
	  },
	  mounted(){
	    //console.log(this.$store.state.count)
	  }
	}
</script>