基于vue-cli的vue项目之vuex的使用2

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,n) {  
      state.count+=n;  
      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>  
    <span>{{$store.state.count}}</spam>  
    </div>  
</template>  
<script>  
    export default {  
        name: 'app',  
        methods: {  
            clickme: function() {  
                this.$store.commit("increment"，100);  
            }  
        },  
    }  
</script>  
<style>  
  
</style>