• 05 Vue进阶 Vuex多模块使用、Vuex 插件、 subscribe订阅等

    一.Vuex基础使用

    文件目录如下：

    0.创建Vuex 实例 

    定义Vuex实例

    1. /*
    2.  * @Description:
    3.  * @Version: 2.0
    4.  * @Autor: Cookie
    5.  * @Date: 2022-06-30 14:50:11
    6.  * @LastEditors: Zhang
    7.  * @LastEditTime: 2022-07-01 09:53:13
    8.  */
    9.  
    10.  
    11. // Vuex数据单向流，数据规范性
    12. import Vuex from 'vuex'
    13. import defaultState from './state/state'
    14. import mutations from './mutations/mutaions'
    15. import getters from './getters/getters'
    16. import actions from './actions/actions'
    17. // import Vue from 'vue'
    18.  
    19. // Vue.use(Vuex)
    20.  
    21. // const store = new Vuex.Store({
    22. //   state: {
    23. //     count: 0
    24. //   },
    25. //   mutations: {
    26. //     updateCount(state, num) {
    27. //       state.count = num
    28. //     }
    29. //   }
    30. // })
    31. // export default store
    32. const isDev = process.env.NODE_ENV === 'development'
    33.  
    34. export default () => {
    35.    return new Vuex.Store({
    36.     strict: isDev, //this.$store.state.count = 99; 开发环境限制这样的写法,规范团队
    37.     state: defaultState, //全局模块
    38.     mutations,
    39.     getters,
    40.     actions,
    41.   })
    42.    
    43. }

    创建Vuex实例

    1. /*
    2.  * @Description:
    3.  * @Version: 2.0
    4.  * @Autor: Cookie
    5.  * @Date: 2022-04-19 09:36:46
    6.  * @LastEditors: Zhang
    7.  * @LastEditTime: 2022-07-01 09:54:26
    8.  */
    9. // The Vue build version to load with the `import` command
    10. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    11. import Vue from 'vue'
    12. import Vuex from 'vuex'
    13. import App from './App'
    14. import router from './router'
    15. import createStore from '@/store/store'
    16.  
    17. // import VueRouter from 'vue-router'
    18. // import createRouter from './router/router'
    19. // Vue.use(VueRouter)
    20. // const router = createRouter()
    21.  
    22. Vue.use(Vuex)
    23. const store = createStore() //建议这样的方式创建，更容易维护
    24.  
    25.  
    26. Vue.config.productionTip = false
    27.  
    28. /* eslint-disable no-new */
    29. new Vue({
    30.   el: '#app',
    31.   router,
    32.   store,
    33.   components: { App },
    34.   template: '<App/>'
    35. })

    1.State

    state.js代码如下：

    1. export default {
    2.   count: 222123,
    3.   firstName: 'Cookie',
    4.   lastName: 'Zhang'
    5. }

    调用state中的数据方式有二种

    1. <div>{{count}}</div>
    2. <div>{{counter}}</div>
    3.  
    4. <script>
    5. import { mapState, mapGetters, mapActions, mapMutations } from "Vuex";
    6. computed: {
    7.  count() {
    8.        return this.$store.state.count; // 方式一
    9.      },
    10.     ...mapState({ // 方式二，最好的方式是使用对象形式
    11.       // counter: "count"  // 别名
    12.       counter: state => state.count 
    13.     }),
    14.     // ...mapState(["count"]),
    15.   }
    16. </script>

    2.Getter

    getters代码如下：

    //getters类似组件中的coumpted，由于后端的数据获取过来我们需要再次组装，当然也可以再组件中写但是多个页面都需要使用就会重复写多次

    1. export default { 
    2.   fullName(state) {
    3.     return `${state.firstName}---${state.lastName}`
    4.   }
    5. }

     调用getter中的数据方式有二种

    1. <div>{{ fullName }}</div>
    2.  
    3. <script>
    4. import { mapState, mapGetters, mapActions, mapMutations } from "Vuex";
    5. computed: {
    6.  // fullName() { // 方式一
    7.     //   return this.$store.getters.fullName;
    8.     // }
    9. ...mapGetters({ // 方式二，简写
    10.       fullName: "fullName"
    11.     }),
    12. </script>

    3.mutation

    mutation代码如下：

    mutation只能接受两个参数,第二个参数需封装成obj

    1. export default {
    2.   updateCount(state, { num, num2 }) { //只能接受两个参数,第二个参数封装成obj
    3.     console.log(num)
    4.  
    5.     console.log(num2);
    6.     state.count = num
    7.   }
    8. }

    调用mutation中的数据方式有二种 （mutation需要操作数据故需放在methods）

    4.Action

    Action.js代码如下：

    mutations同步的修改数据，actions异步的修改数据如

    1. // mutations同步的修改数据，actions异步的修改数据如
    2. export default {
    3.   updateCountAsync(store, data) {
    4.     setTimeout(() => {
    5.       store.commit('updateCount', {
    6.         num: data.num
    7.       })
    8.     }, data.time)
    9.   }
    10. }

     调用Action中的数据方式有二种 （Action需要操作数据故需放在methods）

    1. <div>{{ counter }}</div>
    2.  
    3. <script>
    4. import { mapState, mapGetters, mapActions, mapMutations } from "Vuex";
    5. mounted() {
    6.     console.log(this.$store);
    7.     this.$store.dispatch("updateCountAsync", { //方式一
    8.        num: 5,
    9.        time: 2000
    10.     });
    11.     this.updateCountAsync({ //方式二 建议使用
    12.       num: 5,
    13.       time: 2000
    14.     });
    15.  
    16.   },
    17.   methods: {
    18.     ...mapActions(["updateCountAsync"]) // 引入
    19.   },
    20. </script>

    二.Vuex多模块使用

    0.定义多模块加modules字段 

    定义模块a和b都添加上命名空间，namespaced: true,

    1. /*
    2.  * @Description:
    3.  * @Version: 2.0
    4.  * @Autor: Cookie
    5.  * @Date: 2022-06-30 14:50:11
    6.  * @LastEditors: Zhang
    7.  * @LastEditTime: 2022-07-01 09:53:13
    8.  */
    9. import Vuex from 'vuex'
    10. import defaultState from './state/state'
    11. import mutations from './mutations/mutaions'
    12. import getters from './getters/getters'
    13. import actions from './actions/actions'
    14. // import Vue from 'vue'
    15.  
    16. // Vue.use(Vuex)
    17.  
    18. // const store = new Vuex.Store({
    19. //   state: {
    20. //     count: 0
    21. //   },
    22. //   mutations: {
    23. //     updateCount(state, num) {
    24. //       state.count = num
    25. //     }
    26. //   }
    27. // })
    28. // export default store
    29. const isDev = process.env.NODE_ENV === 'development'
    30.  
    31. export default () => {
    32.   const store = new Vuex.Store({ //hot moudle
    33.     // return new Vuex.Store({
    34.     strict: isDev, //this.$store.state.count = 99; 开发环境限制这样的写法,规范团队
    35.     state: defaultState, //全局模块
    36.     mutations,
    37.     getters,
    38.     actions,
    39.     modules: {
    40.       a: {
    41.         namespaced: true, //命名空间，不设置在全局的mutations下,提升规范性
    42.         state: {
    43.           text: 1
    44.         },
    45.         mutations: {
    46.           updateText(state, text) {
    47.             console.log('a.stata', state)
    48.             state.text = text
    49.           }
    50.         },
    51.         getters: {
    52.           // textPlus(state) { //只依赖a模块的值
    53.           //   return state.text + 1
    54.           // }
    55.           textPlus(state, getters, rootState) { //依赖全局模块的值 ,getters是获取全局的getters，rootState获取全局的state
    56.             // return state.text + rootState.count // 获取顶层模块的
    57.             return state.text + rootState.b.text  //获取b模块的
    58.           }
    59.         },
    60.         actions: {
    61.           add({ state, commit, rootState }) {
    62.             // commit('updateText', rootState.count)  // commit默认获取本模块a 的mutations
    63.             commit('updateCount', { num: 567 }, { root: true }) // 调用全局的mutations
    64.           }
    65.         }
    66.       },
    67.       b: {
    68.         state: {
    69.           text: 2
    70.         },
    71.         actions: {
    72.           testAction({ state, commit, rootState }) {
    73.             commit('a/updateText', 'test text', { root: true }) // 调用a的mutations
    74.           }
    75.         }
    76.       }
    77.     }
    78.   })

    1.多模块a使用state

    1. <div>{{ texta }}</div>
    2.  
    3. <script>
    4. import { mapState, mapGetters, mapActions, mapMutations } from "Vuex";
    5. computed: {
    6.     
    7.      texta() {
    8.           return this.$store.state.a.text;
    9.     }
    10.   }
    11. </script>

     2.多模块a使用Getter

    1. <div>{{ textPlus }}</div>
    2.  
    3. <script>
    4. import { mapState, mapGetters, mapActions, mapMutations } from "Vuex";
    5. computed: {
    6.     // ...mapGetters(["fullName", "a/textPlus"]),
    7.     ...mapGetters({
    8.       fullName: "fullName"
    9.       textPlus: "a/textPlus"
    10.     }),
    11.   }
    12. </script>

    3.多模块a使用mutation 和action

    1. <div>{{ texta }}</div>
    2.  
    3. <script>
    4. import { mapState, mapGetters, mapActions, mapMutations } from "Vuex";
    5. mounted() {
    6.     // 多模块Vuex
    7.     this.updateText(123); // 添加了命名空间
    8.     this["a/updateText"](123);
    9.     this["a/add"]();
    10.  
    11.   },
    12.   methods: {
    13.      ...mapMutations(["a/updateText"])
    14.      ...mapActions(["a/add"])
    15.   },
    16. </script>

    三. Vuex 插件及api

    0.store.registerModule注册模块

    1.store.watch 监听state值变化

    2.store.subscribe监听muatation被调用

    3.store.subscribeAction监听action被调用

    1. /*
    2.  * @Description:
    3.  * @Version: 2.0
    4.  * @Autor: Cookie
    5.  * @Date: 2022-06-30 14:50:11
    6.  * @LastEditors: Zhang
    7.  * @LastEditTime: 2022-07-01 10:42:45
    8.  */
    9. import Vuex from 'vuex'
    10. import defaultState from './state/state'
    11. import mutations from './mutations/mutaions'
    12. import getters from './getters/getters'
    13. import actions from './actions/actions'
    14. // import Vue from 'vue'
    15.  
    16. // Vue.use(Vuex)
    17.  
    18. // const store = new Vuex.Store({
    19. //   state: {
    20. //     count: 0
    21. //   },
    22. //   mutations: {
    23. //     updateCount(state, num) {
    24. //       state.count = num
    25. //     }
    26. //   }
    27. // })
    28. // export default store
    29. const isDev = process.env.NODE_ENV === 'development'
    30.  
    31. export default () => {
    32.   const store = new Vuex.Store({ //hot moudle
    33.     // return new Vuex.Store({
    34.     strict: isDev, //this.$store.state.count = 99; 开发环境限制这样的写法,规范团队
    35.     state: defaultState, //全局模块
    36.     mutations,
    37.     getters,
    38.     actions,
    39.     plugins: [
    40.       (store) => {
    41.         console.log('my store plugin')
    42. store.registerModule('c', { //异步加载的时候才需要用到模块c,此时才需注册模块C
    43.   state: {
    44.     text: 31231
    45.   }
    46. })
    47.  store.watch((state) => state.count + 999, (newCount) => {
    48.    console.log('new count watched:', newCount) //new count watched: 1000 ,count值发生改变会触发这个watch
    49.  })
    50. store.subscribe((mutation, state) => { //用于Vuex插件中
    51.   console.log(mutation.type) //updateCount 监听到mutation中被调用的方法
    52.   console.log(mutation.payload) // {num: 1, num2: 2} 被传入的值
    53. })
    54.         store.subscribeAction((action, state) => {
    55.           console.log(action.type) //updateCountAsync 监听到Action中被调用的方法
    56.           console.log(action.payload) // {num: 5}
    57.           console.log(state)
    58.  
    59.         })
    60.       }
    61.     ]
    62.   })
    63.  
    64.   return store
    65. }
    66.  
    67.  
    68.  
    69. // Vuex数据单向流，数据规范性

    四. Vuex热更替（保持状态）

    1. /*
    2.  * @Description:
    3.  * @Version: 2.0
    4.  * @Autor: Cookie
    5.  * @Date: 2022-06-30 14:50:11
    6.  * @LastEditors: Zhang
    7.  * @LastEditTime: 2022-07-01 10:42:45
    8.  */
    9. import Vuex from 'vuex'
    10. import defaultState from './state/state'
    11. import mutations from './mutations/mutaions'
    12. import getters from './getters/getters'
    13. import actions from './actions/actions'
    14. // import Vue from 'vue'
    15.  
    16. // Vue.use(Vuex)
    17.  
    18. // const store = new Vuex.Store({
    19. //   state: {
    20. //     count: 0
    21. //   },
    22. //   mutations: {
    23. //     updateCount(state, num) {
    24. //       state.count = num
    25. //     }
    26. //   }
    27. // })
    28. // export default store
    29. const isDev = process.env.NODE_ENV === 'development'
    30.  
    31. export default () => {
    32.   const store = new Vuex.Store({ //hot moudle
    33.     // return new Vuex.Store({
    34.     strict: isDev, //this.$store.state.count = 99; 开发环境限制这样的写法,规范团队
    35.     state: defaultState, //全局模块
    36.     mutations,
    37.     getters,
    38.     actions,
    39.     plugins: [
    40.       (store) => {
    41.         console.log('my store plugin')
    42.         store.subscribeAction((action, state) => {
    43.           console.log(action.type) //updateCountAsync 监听到Action中被调用的方法
    44.           console.log(action.payload) // {num: 5}
    45.           console.log(state)
    46.  
    47.         })
    48.       }
    49.     ],
    50.   })
    51.  
    52.   // Vuex 热更替
    53.   if (module.hot) {
    54.     module.hot.accept([
    55.       './state/state',
    56.       './mutations/mutaions',
    57.       './actions/actions',
    58.       './getters/getters'
    59.     ], () => {
    60.       const newState = require('./state/state').default
    61.       const newMutations = require('./mutations/mutaions').default
    62.       const newActions = require('./actions/actions').default
    63.       const newGetters = require('./getters/getters').default
    64.  
    65.       store.hotUpdate({
    66.         state: newState,
    67.         mutations: newMutations,
    68.         getters: newGetters,
    69.         actions: newActions
    70.       })
    71.     })
    72.   }
    73.  
    74.   return store
    75. }
    76.  
    77.  
    78.  
    79. // Vuex数据单向流，数据规范性

  • 相关阅读:
    学习杂记1
    boltdb 原理
    Linux运行jmeter报错java.sql.SQLException:Cannot create PoolableConnectionFactory
    数据隐私重塑：Web3时代的隐私保护创新
    SSM基于WEB的房屋出租管理系统 毕业设计-附源码261620
    用声明式宏解析 Rust 语法
    游戏建模‖那些你找工作时不明白的事
    Hive:BUG记录，错误使用动态分区导致的插入失败
    某医疗机构：建立S-SDLC安全开发流程，保障医疗前沿科技应用高质量发展
    一、基本数据类型（数组）
  • 原文地址：https://blog.csdn.net/qq_37550440/article/details/125553447