Vue开发技巧助力成为优秀工程师（二）

2023-11-20 22:16:03

使用计算属性更新prop

更新prop在业务中是很常见的需求，但在子组件中不允许直接修改prop，因为这种做法不符合单向数据流的原则，在开发模式下还会报出警告。因此大多数人会通过$emit触发自定义事件，在父组件中接收该事件的传值来更新prop。这种做法没有问题，我也常用这种手段来更新prop，但在Vue3.0中提供了一种更优雅的方式来更新prop——计算属性。

<script>
export default {
  props: ['foo'],
  computed: {
    bar() {
      // 对prop进行处理
      return this.foo.toUpperCase()
    }
  }
}
</script>

现在，您可以在子组件中直接使用bar属性，而无需再通过$emit触发自定义事件。这是一种更简洁、更优雅的方式来更新prop。

2. 利用Vuex进行状态管理

Vuex是一个状态管理工具，它可以帮助您管理应用程序中的状态。Vuex使用单一的状态树，这意味着应用程序中的所有组件都可以访问和修改该状态树。这可以使您的应用程序更加易于维护和理解。

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  getters: {
    doubleCount: state => {
      return state.count * 2
    }
  }
})

export default store

现在，您可以在任何组件中使用store来获取或修改状态。

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  }
}
</script>