1. 1.安装 npm install vuex

  2. 2.vuex/store.js//仓库状态管理,第19行。将store抛出
  3. import Vue from 'vue';
  4. import Vuex from 'vuex';
  5. Vue.use(Vuex);
  6. const store = new Vuex.Store({
  7. state: {
  8. count: 0
  9. },
  10. mutations: {
  11. increment (state,n) {
  12. state.count+=n;
  13. console.log(state.count);
  14. }
  15. }

  16. })
  17. export default store;

  18. 3.main.js//使用vuex,第三十行,使用store,,第二十五行,关联store
  19. import Vue from 'vue'
  20. import App from './App'
  21. import router from './router'
  22. import store from './vuex/store';
  23. Vue.config.productionTip = false;
  24. new Vue({
  25. el: '#app',
  26. router,
  27. store,
  28. template: '<App/>',
  29. components: {
  30. App
  31. },
  32. })

  33. 4.app.vue//在组件中使用vuex,第四十玖行,调用vuex/store.js的方法
  34. <template>
  35. <div id="app">
  36. <img src="./assets/logo.png">
  37. <button @click="clickme">点击我</button>
  38. <span>{{$store.state.count}}</spam>
  39. </div>
  40. </template>
  41. <script>
  42. export default {
  43. name: 'app',
  44. methods: {
  45. clickme: function() {
  46. this.$store.commit("increment",100);
  47. }
  48. },
  49. }
  50. </script>
  51. <style>

  52. </style>