任务清单

展示

任务清单展示

前期准备

  • Vue-cli
  • Vuex:这个项目主要练习的就是这个
  • axios
  • ant-design-vue

其他

黑马程序员:Vuex教程,这个老师可以说是讲的非常棒了。

笔记

Vuex 介绍

我把它理解成 全局变量的管理

组成

Vuex 由以下四大部分组成

  1. state:用来存放数据
  2. mutations只有通过 motations 才能修改 state 中的数据
  3. actions:处理异步调用的事件
  4. getters:把 state 中的数据包装一下,不会修改 原 state 中的数据
state

在项目中的 src--store--index.js文件下。
作用:用来存放数据的。

定义变量

一般 state 会长成这个样子:
在这里插入图片描述

使用变量

第一种方法

<!-- mustache 表达式 -->
<p>当前count的值为:{{ $store.state.count }}</p>

第二种方法

<template>
  <div>
    <!-- 3. 展示使用方法> -->
    <p>{{ showNum }}</p>
  </div>
</template>
<script>

// 1. 先在脚本中引入变量的映射,类似于从仓库中取出变量
import { mapState } from 'vuex'
export default {
  // 2. mapState 中放入你想使用的变量名字。
  // 然后再计算属性中,通过拓展运算符,展开 mapState,感觉像组件的注册一样。
  // 使用的时候就可以像使用计算属性那样了。
  computed: {
    ...mapState(['count']),
  },
}
</script>

mutations

作用:用来修改 state 中的数据
优势:方便以后的维护,不然以后项目多的话就不好排查是谁改变的数据了。
注意:只有它才可以修改 state 中的变量,而且不要在这里写异步的操作

定义方法

我们需要现在store.js中定义方法

// new 创造实例,并暴露出去
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    }
  }
})

其中每个方法的第一个参数都是 state,用来拿到 state 中的数据

使用方法

第一种方法

this.$store.commit('add')

第二种方法

<script>
// 1. 先引入 mapMutations
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
  },
  // 2. 然后在这里展开
  methods: {
    ...mapMutations(['sub', 'subN']),
  }
}
</script>
actions

所有的异步操作都要写在这里
如果是修改了数据,那么还需要通过调用 mutations 中的方法
每个异步操作都有一个参数 context,第二个参数用来传参

定义异步操作
// 类似这种感觉,因为延时定时器中的回调是异步的
// 所以我们要卸载 actions 中
actions: {
    addAsync(context) {
      setTimeout(() => {
        // 在 actions 中,不能直接修改 state 中的数据;
        // 必须通过 context.commit() 触发某个 mutation 才行
        context.commit('add')
      }, 1000)
    },
    addNAsync(context, param) {
      // console.log(param)
      setTimeout(() => {
        context.commit('addN', param[0])
      }, 2000)
    }
  }
使用异步操作

第一种方法:this.$store.dispatch('异步事件名称')

addHandle3() {
  // 这里的 dispatch 专门用来触发某个 actions
  this.$store.dispatch('addAsync')
},

第二种方法:

<template>
  <div>
    <!-- <p>当前count的值为:{{ count }}</p> -->
    <!-- 3.这样调用:当然写个点击事件然后执行,都是可以滴 -->
    <button @click="subAsync()">-1异步(第二种引入方法)</button>
    <button @click="subNAsync(10)">-N异步(第二种引入方法)</button>
  </div>
</template>

<script>
// 1. 在这里导入 mapActions
import { mapActions } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    // 2. 把异步的方法映射出来,使用 actions 的第二种方法
    ...mapActions(['subAsync', 'subNAsync'])
  }
}
</script>

getters

gettersstate 中的值稍加修饰,然后return 回来,并不会改变 state中的数据
再次声明:只有 mutations 才有权力修改 state 中的数据的值。
它返回的是变量,所以跟 state 的使用方法很像,映射的话都可以映射到 computed中去

定义装潢公司
getters: {
    // 不会修改 store 中的数值,只是包装数据的作用
    showNum(status) {
      return `当前的count值为[${status.count}]`
    }
  }
使用装潢公司

第一种方法

<p>{{ this.$store.getters.showNum }}</p>

第二种方法

 computed: {
    ...mapGetters(['showNum'])
  },
Logo

前往低代码交流专区

更多推荐