vue3.x+ts学习笔记

在store里使用getter获取属性时，该属性就是响应式的，但是在组件中使用该属性时，需要用上computed方法，直接赋值不能生效(state也应该同理)

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Home',
  setup() {

    const store = useStore<GlobalStore>()
    // 可以根据getters里属性变化而变化
    const list = computed(() => store.getters.getColumns)
    
    // 以下不能有变化：getColumns里面的内容有变化，list还是原来的值
    // const list = store.getters.getColumns
    //这种也不行
    // const list = ref([])
    // list.value = store.getters.getColumns
    
    return {
      list
    }
  }
})
</script>

遇到computed不生效的情况

如果一个属性通过computed计算出来的，只是单纯的定义，没有使用到app里，computed里面定义的方法不会触发，该属性不会根据监听属性响应而更新，看下面代码注释

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const name = ref('mkie')
    
    const nameComputed = computed(() => {
        // 单纯定义，computed的方法不会触发
      console.log(name.value)
      return name.value
    })

    // 如果只在这里使用，会触发一次computed方法
    // 但是后面尽管name的值有改变，computed方法也不会再触发
    // console.log(nameComputed.value)

    const changeHandle = () => {
      name.value = name.value + 1
    }

    return {
      name,
      
      // 把nameComputed暴露出去（只是暴露出去还不行）
      // 并在html代码中用到它，或者在 组合式api中使用到它，就会触发它的computed方法
      // name的值发生改变，会触发computed方法，并且 nameComputed 的值也跟着改变
      nameComputed
    }
  },
})
</script>

在html代码中

<template>
  <p>{{ name }}</p>
  <button @click="changeHandle">change</button>
  <p>{{nameComputed}}</p>
</template>

在组合式api中

import { ComputedRef } from 'vue'

const componentMeht = (nameComputed: ComputedRef<string>) => {

  const newName = nameComputed.value + " Mike"

  return {
    newName
  }
}

export default componentMeht

router-link禁止跳转的技巧

利用 $route.fullPath 获取当前页面路径，赋值给to，来实现

如何监听route.params的变化

route.params对象也是响应式的，可以使用watch方法

watch(() => route.params, (toParams) => {
    //其它操作
})

computed里做其它操作注意的点

在computed同时给其它响应属性做赋值操作，该属性如果发生变化，也会触发computed方法

const ids = ref([])
const carts = computed(() => {
    const list store.state.cart.list
    
    // 这里给ids复制，只要ids有内容有变化，都会触发改computed
    list.forEach(item => { ids.push(item.id) })
    
    return list
})