Vuex辅助函数

最新推荐文章于 2025-06-18 21:16:53 发布

原创最新推荐文章于 2025-06-18 21:16:53 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

vue知识点专栏收录该内容

6 篇文章

订阅专栏

vuex辅助函数
  为什么使用辅助函数
    可以对当前store实例里边数据进行调用时候  不再使用this.$store 就可以直接获取里边的数据
  
  辅助函数有几个
    四个
      mapState
        使用步骤
          state: {
            num: 0
          }
          1 引入mapState
            import {mapState} from 'vuex'

          2 在computed计算属性中 使用mapState
            1 对象
              computed: mapState({
                自定义属性名: 'state中属性名'
              })
            2 数组
              computed: mapState(['state中属性名'])
          3 页面渲染  直接编写computed里边自定义属性名
            <标签名>{{state中属性名}}</标签名>
          
        注意：
          为什么要使用扩展运算符
            ...

          使用扩展运算符  可以让我们在computed里边编写更多的计算属性
          computed: {
            ...mapState({

            })
          }


      mapGetters
        使用步骤
          state: {
            num: 0
          }
          1 引入mapGetters
            import {mapGetters} from 'vuex'

          2 在computed计算属性中 使用mapGetters
            1 对象
              computed: mapGetters({
                自定义属性名: 'getters方法名'
              })
            2 数组
              computed: mapGetters(['getters方法名'])
          3 页面渲染  直接编写computed里边自定义属性名
            <标签名>{{自定义属性名}}</标签名>
          
        注意：
          为什么要使用扩展运算符
            ...

          使用扩展运算符  可以让我们在computed里边编写更多的计算属性
          computed: {
            ...mapGetters({

            })
          }

      mapMutations
        mutations: {
          changeNum(){

          }
        }
        1 引入mapMutations
          import {mapMutations} from 'vuex'

        2 在methods方法中 使用mapMutations
          1 对象
            methods: mapMutations({
              自定义属性名: 'mutations方法名'
            })
          2 数组
            methods: mapMutations(['mutations方法名'])
        3 页面渲染  直接编写methods里边自定义属性名
          <标签名>{{自定义属性名}}</标签名>
        
      注意：
        为什么要使用扩展运算符
          ...

        使用扩展运算符  可以让我们在methods里边编写更多的方法
        methods: {
          ...mapMutations({
            
          })
        }
      mapActions
        mapActions与mapMutations用法一样