3.1 vuex概念

https://vuex.vuejs.org/zh/installation.html

vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据；

3.2 vuex的基本使用

  1. #1.拷贝原项目中除了node_modules之外的其他信息，运行npm install安装模块 
  3. #2.安装vuex
  4.  npm i vuex -S
  6. #3.main.js
  7. import Vue from 'vue'
  8. import Vuex from 'vuex'
  10. // 注册vuex到vue中
  11. Vue.use(Vuex)
  13. // new Vuex.Store()实例，得到一个数据仓储对象
  14. // 可以在组件中通过this.$store.state.xx 来访问store中的数据
  15. var store = new Vuex.Store({
  16.     //state相当于组件中的data
  17.     state: {
  18.         count: 0
  19.     },
  20.     //如果要修改store中state的值，需要调用 mutations提供的方法，可以通过this.$store.commit('方法名')来调用
  21.     mutations: {
  22.         increment(state) {
  23.             state.count++
  24.         },
  25.         //mutations函数参数列表中最多支持两个参数，其中参数1是state； 参数2是通过commit提交过来的参数；
  26.         subtract(state, obj) {
  27.             console.log(obj)
  28.             state.count -= obj.step;
  29.         }
  30.     },
  31.     getters: {
  32.         //这里的getters只负责对外提供数据，不负责修改数据，如果想要修改 state 中的数据需要在mutations中修改
  33.         optCount: function (state) {
  34.             return '当前最新的count值是：' + state.count
  35.         }
  36.     }
  37. })
  39. // 总结：
  40. // 1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations
  41. // 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.***
  42. // 3. 如果组件想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称'， 唯一的一个参数)
  43. // 4. store中state上的数据在对外提供的时候建议做一层包装，推荐使用 getters。调用的时候则用this.$store.getters.***
  46. import App from './App.vue'
  48. const vm = new Vue({
  49.     el: '#app',
  50.     render: c => c(App),
  51.     //将vuex创建的store挂载到VM实例上，只要挂载到了 vm 上，任何组件都能使用store来存取数据
  52.     store
  53. })
  55. #4.index.html
  56. <body>
  57.     <div id="app"></div>
  58. </body>
  60. #5.App.vue
  61. <template>
  62.     <div>
  63.         <h1>这是 App 组件</h1>
  64.         <hr>
  65.         <counter></counter>
  66.         <hr>
  67.         <amount></amount>
  68.     </div>
  69. </template>
  71. <script>
  72.     import counter from "./components/counter.vue";
  73.     import amount from "./components/amount.vue";
  75.     export default {
  76.         data() {
  77.             return {};
  78.         },
  79.         components: {
  80.             counter,
  81.             amount
  82.         }
  83.     };
  84. </script>
  86. #6.components/amount.vue
  87. <template>
  88.   <div>
  89.     <h3>{{ $store.getters.optCount }}</h3>
  90.   </div>
  91. </template>
  93. #7.components/counter.vue
  94. <template>
  95.   <div>
  96.     <input type="button" value="绑定事件-减少" @click="sub">
  97.     <input type="button" value="绑定事件-增加" @click="add">
  98.     <br>
  99.     <input type="text" v-model="$store.state.count">
  100.   </div>
  101. </template>
  103. <script>
  104. export default {
  105.   data() {
  106.     return {
  107.     };
  108.   },
  109.   methods: {
  110.     add() {
  111.        this.$store.commit("increment");
  112.     },
  113.     sub() {
  114.       this.$store.commit("subtract",{ step:3});
  115.     }
  116.   }
  117. };
  118. </script>

3.3 vuex异步修改状态

mutation的使用局限：mutation必须是同步函数，如果有异步操作，可以在actions完成

  1. #main.js中给store添加actions的方法
  2. var store = new Vuex.Store({
  3.     // state相当于组件中的data
  4.     state: {
  5.         count: 0
  6.     },
  7.     // 如果要修改store中state的值，需要调用 mutations提供的方法，可以通过this.$store.commit('方法名')来调用
  8.     mutations: {
  9.         increment (state) {
  10.             state.count++
  11.         },
  12.         // mutations函数参数列表中最多支持两个参数，其中参数1是state； 参数2是通过commit提交过来的参数；
  13.         subtract (state, obj) {
  14.             console.log(obj)
  15.             state.count -= obj.step
  16.         }
  17.     },
  18.     getters: {
  19.         // 这里的getters只负责对外提供数据，不负责修改数据，如果想要修改 state 中的数据需要在mutations中修改
  20.         optCount: function (state) {
  21.             return '当前最新的count值是：' + state.count
  22.         }
  23.     },
  24.     actions: {
  25.         // action中的方法允许异步事件
  26.         increment ({ commit }) {
  27.             setTimeout(() => {
  28.                 // 提交mutations中的increment方法
  29.                 commit('increment')
  30.             }, 1000)
  31.         },
  32.         subtract ({ commit }, obj) {
  33.             // 返回一个Promise，以便做回调
  34.             return new Promise((resolve, reject) => {
  35.                 setTimeout(() => {
  36.                     commit('subtract', obj)
  37.                     resolve()
  38.                 }, 1000)
  39.             })
  40.         }
  41.     }
  42. })
  44. #components/counter.vue
  45. methods: {
  46.     add () {
  47.         // dispatch 触发指定的action
  48.         this.$store.dispatch("increment")
  49.     },
  50.         sub () {
  51.             this.$store.dispatch("subtract", { step: 3 })
  52.                 .then(() => {
  53.                 console.log("减少操作完成")
  54.             })
  55.         }
  56. }

3.4 vuex的模块

  1. #1.使用Vuex.Store中的modules声明多个模块
  2. const moduleA = {
  3.   state: {
  4.     count: 1
  5.   },
  6.   mutations: {
  8.   }
  9. }
  11. const moduleB = {
  12.   state: {
  13.     count: 11
  14.   },
  15.   mutations: {
  17.   }
  18. }
  20. const store = new Vuex.Store({
  21.   modules: {
  22.     a: moduleA,
  23.     b: moduleB
  24.   }
  25. })
  27. #2.使用不同模块中的数据
  28. <div>
  29.     <h3>{{ $store.state.a.count }}</h3>
  30.     <h3>{{ $store.state.b.count }}</h3>
  31. </div>

3.5 刷新网页时vuex缓存

https://blog.csdn.net/weixin_42233917/article/details/82217596