基于vue-cli的vue项目之vuex的使用1---------最简单的vuex模板

基础什么的，肯定要从最简单的模型学起

1.安装 npm install vuex

2.vuex/store.js//仓库状态管理，第19行。将store抛出
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
	 state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++;
      console.log(state.count);
    }
  }

}) 
export default store;

3.main.js//使用vuex,第三十行，使用store，，第二十五行，关联store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store';
Vue.config.productionTip = false;
new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: {
		App
	},
})

4.app.vue//在组件中使用vuex，第四十玖行，调用vuex/store.js的方法
<template>
	<div id="app">
		<img src="./assets/logo.png">
		<button @click="clickme">点击我</button>
	</div>
</template>
<script>
	export default {
		name: 'app',
		methods: {
			clickme: function() {
				this.$store.commit("increment");
			}
		},
	}
</script>
<style>

</style>

效果：