Vue技术-mapstart与mapGetters=》模块化+命名空间

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue技术-mapstart与mapGetters=》模块化+命名空间相关的知识,希望对你有一定的参考价值。

Vue技术-mapstart与mapGetters=》模块化+命名空间

导入mapState

 import mapState from 'vuex'

使用mapState获取state内容,避免过多的字符串在模板里面堆砌
借助mapStart生成计算属性,从start中读取数据(对象写法)

  computed:
            bigSum()
                return this.$store.getters.bigSum
            ,
            ...mapState( name: 'name' )
            
        ,
        mounted()
            const x = mapState(name:'name');
            console.log('x is',x);
        

但是对于这段代码来说是es6的新语法规则,将一个数据对象的属性值给另一个对象

   ...mapState( name: 'name' )

mapGetters就是获取getters数据

 computed:
            // bigSum()
            //     return this.$store.getters.bigSum
            // ,
            ...mapGetters(['bigSum']),
            ...mapState( name: 'name' )
            
        ,

他们有对象写法和数组写法,但特别注意的是这个字符串和变量的简写方式。

四个map方法的使用

  1. mapState方法:用于帮助我们映射state中的数据为计算属性

    computed: 
        //借助mapState生成计算属性:sum、school、subject(对象写法)
         ...mapState(sum:'sum',school:'school',subject:'subject'),
             
        //借助mapState生成计算属性:sum、school、subject(数组写法)
        ...mapState(['sum','school','subject']),
    ,
    
  2. mapGetters方法:用于帮助我们映射getters中的数据为计算属性

    computed: 
        //借助mapGetters生成计算属性:bigSum(对象写法)
        ...mapGetters(bigSum:'bigSum'),
    
        //借助mapGetters生成计算属性:bigSum(数组写法)
        ...mapGetters(['bigSum'])
    ,
    
  3. mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

    methods:
        //靠mapActions生成:incrementOdd、incrementWait(对象形式)
        ...mapActions(incrementOdd:'jiaOdd',incrementWait:'jiaWait')
    
        //靠mapActions生成:incrementOdd、incrementWait(数组形式)
        ...mapActions(['jiaOdd','jiaWait'])
    
    
  4. mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

    methods:
        //靠mapActions生成:increment、decrement(对象形式)
        ...mapMutations(increment:'JIA',decrement:'JIAN'),
        
        //靠mapMutations生成:JIA、JIAN(对象形式)
        ...mapMutations(['JIA','JIAN']),
    
    

备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

模块化+命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = 
      namespaced:true,//开启命名空间
      state:x:1,
      mutations:  ... ,
      actions:  ... ,
      getters: 
        bigSum(state)
           return state.sum * 10
        
      
    
    
    const personAbout = 
      namespaced:true,//开启命名空间
      state: ... ,
      mutations:  ... ,
      actions:  ... 
    
    
    const store = new Vuex.Store(
      modules: 
        countAbout,
        personAbout
      
    )
    
  3. 开启命名空间后,组件中读取state数据:

    //方式一:自己直接读取
    this.$store.state.personAbout.list
    //方式二:借助mapState读取:
    ...mapState('countAbout',['sum','school','subject']),
    
  4. 开启命名空间后,组件中读取getters数据:

    //方式一:自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取:
    ...mapGetters('countAbout',['bigSum'])
    
  5. 开启命名空间后,组件中调用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',incrementOdd:'jiaOdd',incrementWait:'jiaWait')
    
  6. 开启命名空间后,组件中调用commit

    //方式一:自己直接commit
    this.$store.commit('personAbout/ADD_PERSON',person)
    //方式二:借助mapMutations:
    ...mapMutations('countAbout',increment:'JIA',decrement:'JIAN'),
    

以上是关于Vue技术-mapstart与mapGetters=》模块化+命名空间的主要内容,如果未能解决你的问题,请参考以下文章

使用 Vuex,为啥 mapGetters 不接受与 mapState 相同的语法?

在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`

使用Vue CDN时如何使用mapGetters?

vuex 调用方法总结

Vuex mapGetter的基本使用

vue modules 使用