vuex中getter的用法

男娘i 2022-01-20 04:45 276阅读 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 条评论，276人围观）

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

相关阅读

相关 Vuex--getters--使用/教程/实例

原文网址：[Vuex--getters--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vuex--getters--_IT_-CSDN] 简介说明本文

淡淡的烟草味﹌/ 2023年10月01日 16:43/ 0 赞/ 3 阅读

相关 Vuex中mapState的用法

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

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

相关 vuex入门篇 -- state和getters

前言从这一篇文章开始，将要学习的是vuex的入门基础内容。vuex是一个企业级程序的状态管理的高效工具，官方认证。也将是我们和vue打交道的内容之中常常会接触到的部分。

短命女/ 2022年10月01日 09:44/ 0 赞/ 210 阅读

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

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

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

相关 vuex中getters

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

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

相关 vuex中getter的用法

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

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

相关 Vuex之理解Getters的用法

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

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

相关 Vuex学习笔记（四）——getters

Vuex中的getter，可以认为是store的计算属性。就跟计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的以来至发生了改变才会被重新计算。我们来

痛定思痛。/ 2021年08月14日 01:43/ 0 赞/ 458 阅读

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

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

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

相关 vuex getters计算属性

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

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