Vuex

作者: 大佬教我写程序 | 来源:发表于2021-07-23 16:40 被阅读0次

    状态管理

    • 在开发中,我们会用应用程序处理很多的数据,这些数据需要保存在我们应用程序徐的某一个位置,对于这些数据的管理我们就称之为状态管理
      image.png

    使用方法

    • 下载vuex最新版 npm install vuex@next
    • 新建文件夹及文件


      image.png
    * index.js导入createStore ,并创建state共享数据
    import { createStore } from 'vuex'
    const store = createStore({
      state() {
        return {
          counter: 100
        }
      }
    })
    export default store;
    
    • 在main.js文件中添加依赖并使用
      import store from './store'
      createApp(App).use(store).mount('#app')
    • 在组件中使用
      <h2>{{$store.state.counter}}</h2>
    • 组件方法中获取数据(不建议修改)
      this.$store.state.counter
    • 组件方法通过commit修改数据(建议)


    单一状态树

    • 定义:用一个对象就包含全部的应用层级的状态
    • 单一状态树的优势:能够使用最直接的方式找到每个状态片段,方便维护、调试和管理

    mapState方法

    • 导入
    • 使用 option api
      setup()做法
      封装成一个函数

    es6之扩展运算符 三个点(…)

    • 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
    let bar = { a: 1, b: 2 };
    let baz = { ...bar }; // { a: 1, b: 2 }
    

    相当于

    let bar = { a: 1, b: 2 };
    let baz = Object.assign({}, bar); // { a: 1, b: 2 }
    

    getter的基本使用

    • 类似于computed
    option api
    • 当多个计算属性时,我们可以使用 mapGetters (需要要导入)

      image.png

    mutations

    • 提交数据


    • mapMutations


      image.png
    • 提交到根里面 image.png

    actions的基本使用(派发)

    • 可以进行异步操作


      context
    image.png
    • 派发到根actions里面


    • 派发风格------对象类型


    • 辅助函数 mapActions


      image.png
    • setup函数中使用


    • 结合axios和promise做异步请求


    modules(模块)

    • 使每个模块都拥有自己的state、mutation、action、getter,甚至嵌套子模块
    • 基本使用
      导出


      userModule

      导入


    • 拿一个模块里面的getters里面的数据
      其他模块的getters里面的数据在根getters会做一个合并,
      actions和mutations里面的数据同样会做合并


      image.png

      但是这种方法很难让人知道数据到低是从那个文件传过来的
      so:我们在定义模块的时候,在其对象里面设置属性



      使用

    • 在组件里使用模块辅助函数
      写法一


      写法二:
      import { createNamespacedHelpers, mapState, mapGetters, mapMutations, mapActions } from "vuex"; const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers("home")
    computed(){
      ...mapState(["homeCounter"]),
      ...mapGetters(["doubleHomeCounter"])
    }
    
    

    关于映射返回函数的处理方式(就算有子模块也适用)

    • 使用方法("模块名字",["方法名"])
      const getters = useGetters("home", ["doubleHomeCounter"])
    • 出口函数index.js
    import { useGetters } from './useGetters';
    import { useState } from './useState';
    
    export {
      useGetters,
      useState
    }
    
    • useState.js
    import { mapState, createNamespacedHelpers } from 'vuex'
    import { useMapper } from './useMapper'
    
    export function useState(moduleName, mapper) {
      let mapperFn = mapState
      if (typeof moduleName === 'string' && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapState
      } else {
        mapper = moduleName
      }
    
      return useMapper(mapper, mapperFn)
    }
    
    
    • useGetters.js
    import { mapGetters, createNamespacedHelpers } from 'vuex'
    import { useMapper } from './useMapper'
    
    export function useGetters(moduleName, mapper) {
      let mapperFn = mapGetters
      if (typeof moduleName === 'string' && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapGetters
      } else {
        mapper = moduleName
      }
    
      return useMapper(mapper, mapperFn)
    }
    
    
    • useMapper.js
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    
    export function useMapper(mapper, mapFn) {
      // 拿到store独享
      const store = useStore()
    
      // 获取到对应的对象的functions: {name: function, age: function}
      const storeStateFns = mapFn(mapper)
    
      // 对数据进行转换
      const storeState = {}
      Object.keys(storeStateFns).forEach(fnKey => {
        const fn = storeStateFns[fnKey].bind({$store: store})
        storeState[fnKey] = computed(fn)
      })
    
      return storeState
    }
    

    相关文章

      网友评论

        本文标题:Vuex

        本文链接:https://www.haomeiwen.com/subject/xgeemltx.html