Vuex中state、actions、mutations基础使用

最新推荐文章于 2024-06-25 08:15:00 发布

dy1717

最新推荐文章于 2024-06-25 08:15:00 发布

阅读量376

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/dy1717/article/details/122015387

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

接上篇：搭建Vuex环境_dy1717的博客-CSDN博客

已经完成了Vuex项目的部署，话不多说开整：

首先在src/components下创建一个Count.vue

1.部署基础样式：

<template>
  <div class="box">
    <h1>当前求和为:？？</h1>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button>+</button>
    <button>-</button>
    <button>当前求和为奇数再加</button>
    <button>等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
    
    };
  },
  methods: {
    
  },
  mounted() {
  
  },
};
</script>

<style scoped lang="css">
button {
  margin: 5px;
}
</style>

2.挂载组件在App.vue中导入Count.vue，并注册使用

<template>
  <div>
    <Count></Count>
  </div>
</template>

<script>
import Count from "@/components/Count.vue";
export default {
  components: {
    Count,
  },
};
</script>

<style>
</style>

打开浏览器查看页面如下：

3.我需要在下拉选框的时候，获取相应的数据，使用v-model绑定select

data() {
    return {
      n: 1, //用户选择的数字
    };
  },

//这里使用修饰符更加严谨点

<select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

4.当我点击按钮的时候，数据可以进行相应的操作

4.1给四个按钮绑定点击事件

 <button @click="add">+</button>
 <button @click="decrement">-</button>
 <button @click="addOdd">当前求和为奇数再加</button>
 <button @click="addWait">等一等再加</button>

4.2在methods中声明函数

 methods: {
    add() {
    
    },
    decrement() {
    
    },
    addOdd() {
     
    },
   addWait() {
     
    },
  }

4.3 在store.index里面定义初始值sum

const state = {
    sum: 0  //当前的值
}

4.4 先进行同步的加减运算，也就是在mutations中操作数据

// state传入的是sum的值
const mutations = {
//加法
    JIA(state, value) {
        state.sum += value
    },
//减法
    JIAN(state, value) {
        state.sum -= value
    }
}

4.5 写好函数后回到Count.vue中

methods:{ 
    add() {
//通过调用commit里面的方法 进行加减操作
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    },
},
//在mounted函数中打印Count组件中的信息
 mounted() {
    console.log("Count", this.$store);
  },

现在的页面就可以实现对数据的删减

4.6 回到代码中，现在想要实现求和为奇数再加和等一等再加，两个需求一个需要判断一下，另一个是延时效果，都是异步操作。

const actions = {
     jiaOdd(context, value) {
//判断是否为奇数
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
//延时器
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500)
    },
}

4.7 回到Count.vue中

methods:{
 addOdd() {
      this.$store.dispatch("jiaOdd", this.n);
    },
    addWait() {
      this.$store.dispatch("jiaWait", this.n);
    },
}

回到页面查看：

以上就是三种属性的基础使用，后续不定期更新(喜欢的话点个赞支持一下嘿嘿)