Vue高效管理组件状态的多种方法

export default {
  data() {
    return {
      count: 0,
      user: { name: '张三', age: 18 }
    };
  }
};

computed: {
  doubledCount() {
    return this.count * 2;
  }
}

watch: {
  count(newVal, oldVal) {
    console.log(`count从${oldVal}变为${newVal}`);
  }
}

<!-- 父组件 -->
<template>
  <div>
    <child-component :count="count" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return { count: 10 };
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="increase">增加</button>
</template>
<script>
export default {
  props: ['count'],
  methods: {
    increase() {
      this.$emit('update:count', this.count + 1);
    }
  }
};
</script>

<!-- 父组件 -->
<child-component v-model:count="count" />

<!-- 子组件 -->
<template>
  <input :value="count" @input="$emit('update:count', $event.target.value)" />
</template>
<script>
export default {
  props: ['count']
};
</script>

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    }
  },
  actions: {
    incrementAsync({ commit }, payload) {
      setTimeout(() => {
        commit('increment', payload);
      }, 1000);
    }
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  }
});

<template>
  <div>
    <p>全局计数：{{ count }}</p>
    <button @click="incrementAsync(1)">异步增加</button>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  computed: {
    ...mapGetters(['getCount']),
    count() {
      return this.getCount;
    }
  },
  methods: {
    ...mapActions(['incrementAsync'])
  }
};
</script>

// store.js
import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

<template>
  <div>
    <p>全局计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script>
import { useMainStore } from '@/store';
export default {
  setup() {
    const store = useMainStore();
    return {
      count: store.count,
      increment: store.increment
    };
  }
};
</script>

// 在父组件中
import { reactive, provide } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    provide('state', state);
    const increment = () => { state.count++; };
    return { state, increment };
  }
};

<!-- 在子组件中 -->
<template>
  <div>
    <p>当前计数：{{ state.count }}</p>
    <button @click="state.count++">增加</button>
  </div>
</template>
<script>
import { inject } from 'vue';
export default {
  setup() {
    const state = inject('state');
    return { state };
  }
};
</script>