vuex中getter的用法

男娘i 2022-01-20 04:45 291阅读 0赞

在vuex中getter相当于计算属性
       1.在store.js中写上：
        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)
        
        export default new Vuex.Store({
          state:{
            count:0,
          },
           mutations:{
            changeCount:function (state,count) {
              state.count=count
              console.log(state.count)
            },
          getters: {
            // 单个参数
            countDouble: function(state){
              return state.count * 2
            },
            // 两个参数
            CountDoubleAndDouble: function(state, getters) {
              return getters.countDouble * 2
            }
          }
        })
    2.在组件的页面写：（这里调用的方式有两种）
    第一种：
    <div class="add" @click="changeCount">＋</div>
      一个参数:{
        {countDouble}}
      两个参数{
        {CountDoubleAndDouble}} <br />
    </div>
    data () {
        return {
          Acount:0,
        }
      },
    (............重点............)
    countDouble: function(){
       return this.$store.getters.countDouble
    },
    countDoubleAndDouble: function(){
      return this.$store.getters.countDoubleAndDouble
    },
    methods:{
        changeCount(){
          this.Acount++;
          this.$store.commit('changeCount',this.Acount);
        }
      }
    第二种：
      import { mapGetters } from 'vuex'
     ...mapGetters([
          'countDouble',
          'CountDoubleAndDouble',
        ]),
    无论用哪一种结果都是一样的，看个人喜好...........
    复制代码

发表评论取消回复

表情：

评论列表（有 0 条评论，291人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuex中的getters

vuex中的getters 简介本文讲解vuex里面的getters的用法。这里是vue官方对其的介绍。 ![在这里插入图片描述][8e5a5af97f4

矫情吗；*/ 2024年03月16日 13:41/ 0 赞/ 58 阅读

相关深入Vuex的getters

1.什么是getters（获取状态）在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到

朴灿烈づ我的快乐病毒、/ 2023年06月07日 10:49/ 0 赞/ 10 阅读

相关 vuex学习---getter

vuex中的getter可以认为是store的计算属性，getter的返回值会根据他的依赖被缓存起来，只有他的依赖值发生变化才会被重新计算；getter接受state作为其第一

布满荆棘的人生/ 2023年05月30日 11:58/ 0 赞/ 13 阅读

相关 Vuex中mapState的用法

Vuex中mapState的用法 index.js import Vue from 'vue' import Vuex from 'vuex'

我会带着你远行/ 2022年12月31日 02:27/ 0 赞/ 195 阅读

相关 Vuex的使用（二）——state和getters的定义和用法

参考文档：https://vuex.vuejs.org/zh/guide/ 首先说明一下笔者对state和getters的理解： state是在前端应用中需要全局共享和维护

女爷i/ 2022年09月09日 09:28/ 0 赞/ 205 阅读

相关 vuex中getters

vuex中的getters类似于计算属性computed，对数据池state中的值进行处理（1）在组件中将值添加到state的personList属性中 <tem

浅浅的花香味﹌/ 2022年02月27日 05:54/ 0 赞/ 261 阅读

相关 vuex中getter的用法

在vuex中getter相当于计算属性 1.在store.js中写上： import Vue from 'vue' imp

男娘i/ 2022年01月20日 04:45/ 0 赞/ 292 阅读

相关 Vuex之理解Getters的用法

一.什么是getters 在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到comp

我会带着你远行/ 2021年09月15日 02:24/ 0 赞/ 462 阅读

相关 vuex中state,getter,mutation,action,module的用法与理解

一. State:\{ count: 0 \} 保存着所有的全局变量组件中获取： computed:{ ...mapState(

小鱼儿/ 2021年07月27日 01:30/ 0 赞/ 445 阅读

相关 vuex getters计算属性

export default new Vuex.Store({ 计算属性用于对state中的数据进行计算

短命女/ 2021年07月24日 11:05/ 0 赞/ 477 阅读