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

1. 1.安装 npm install vuex
2. 
   
3. 2.vuex/store.js//仓库状态管理，第19行。将store抛出
4. import Vue from 'vue';
5. import Vuex from 'vuex';
6. Vue.use(Vuex);
7. const store = new Vuex.Store({
8. state: {
9. count: 0
10. },
11. mutations: {
12. increment (state,n) {
13. state.count+=n;
14. console.log(state.count);
15. }
16. }
17. 
    
18. })
19. export default store;
20. 
    
21. 3.main.js//使用vuex,第三十行，使用store，，第二十五行，关联store
22. import Vue from 'vue'
23. import App from './App'
24. import router from './router'
25. import store from './vuex/store';
26. Vue.config.productionTip = false;
27. new Vue({
28. el: '#app',
29. router,
30. store,
31. template: '<App/>',
32. components: {
33. App
34. },
35. })
36. 
    
37. 4.app.vue//在组件中使用vuex，第四十玖行，调用vuex/store.js的方法
38. <template>
39. <div id="app">
40. <img src="./assets/logo.png">
41. <button @click="clickme">点击我</button>
42. <span>{{$store.state.count}}</spam>
43. </div>
44. </template>
45. <script>
46. export default {
47. name: 'app',
48. methods: {
49. clickme: function() {
50. this.$store.commit("increment"，100);
51. }
52. },
53. }
54. </script>
55. <style>
56. 
    
57. </style>