Vue3+TS Day25 - vuex、actions、mod

一、actions

1、actions和mutation都是用于修改vuex数据，有什么不同？

• actions提交mutation，不直接变更数据
• actions通常包含异步操作

image.png

2、actions基本用法？辅助函数mapActions用法？

image.png image.png

3、如何在actions里面进行异步操作？并且如何告诉外界异步操作执行完毕？

image.png

二、module

1、为什么需要使用module？

• vuex的数据越来越复杂的时候，要进行module化；比如将home、user...等等模块的数据区分开来

image.png image.png

2、module的命名空间起什么作用？

image.png image.png

3、有module的命名空间情况下，如何使用vuex的辅助函数？

image.png image.png image.png

三、nexttick

1、需求：如果点击按钮改变message，导致message容器高度改变，如何正确拿到改变后的message容器高度？

• 思路一：使用声明周期函数【updated】，但是该函数是统一刷新的钩子入口，需要做各种判断才能正确拿到。

• 思路二：使用【nexttick】

2、nexttic原理简单描述？

官方解释:将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

后面再回来看吧，有源码分析，但是听的不是很懂

<template>
  <div ref="divRef" class="message">
    {{ messageRef }}
  </div>
  <button @click="addMessage">addMessage</button>
</template>

<script>
import { ref, nextTick } from "vue";
export default {
  setup() {
    const messageRef = ref("");
    const divRef = ref(null);
    const addMessage = () => {
      messageRef.value += "哈哈哈哈哈哈哈哈";
      console.log(divRef.value);
      nextTick(()=> {
      console.log(divRef.value.offsetHeight);
      })
    };

    return {
      messageRef,
      addMessage,
      divRef
    };
  },
  // data() {
  //   return {
  //     message: ""
  //   }
  // },
  // methods: {
  //   addMessage() {
  //     this.message += "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
  //     this.$nextTick(()=>{

  //     console.log(this.$refs["divRef"].offsetHeight);
  //     })
  //   }
  // }
};
</script>

<style scoped>
.message {
  width: 100px;
}
</style>