当前位置：首页 > article >正文

Vue3框架核心功能点响应式数据reactive、组合式API setup、computed、组件通信、路由导航，状态管理vuex、pinia等的实战示例代码

article 2025/3/1 3:43:27

记录几个Vue3框架核心功能点，例如响应式数据reactive、组合式API setup、computed、组件通信、路由导航，状态管理vuex、pinia……等实战示例代码：

一、响应式数据（Reactive Data）

创建响应式对象

使用reactive函数创建一个响应式的对象。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue3'
});

// 在组件中使用
export default {
  setup() {
    return { state };
  }
};

在模板中可以直接使用{{state.count}}和{{state.message}}来显示数据，并且当这些数据发生变化时，视图会自动更新。

响应式数组操作

对于数组的操作，Vue3也能正确追踪变化。

const list = reactive([1, 2, 3]);

function addItem() {
  list.push(list.length + 1);
}

二、组合式API（Composition API） - setup函数

计算属性（Computed Properties）

计算属性基于响应式数据进行计算并缓存结果。

import { reactive, computed } from 'vue';

const state = reactive({
  firstName: 'John',
  lastName: 'Doe'
});

const fullName = computed(() => `${state.firstName} ${state.lastName}`);

export default {
  setup() {
    return { state, fullName };
  }
};

生命周期钩子（Lifecycle Hooks）

在setup函数中使用生命周期钩子。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });
  }
};

三、组件通信

父子组件通信 - Props和Emit

父组件传递数据给子组件（Props）。
子组件发送事件给父组件（Emit）。
父组件：

<template>
  <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const parentMessage = ref('Hello from parent');
    const handleChildEvent = (data) => {
      console.log('Received from child:', data);
    };
    return { parentMessage, handleChildEvent };
  }
};
</script>

子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

<script>
import { defineComponent, toRefs } from 'vue';

export default defineComponent({
  props: {
    message: String
  },
  setup(props, { emit }) {
    const { message } = toRefs(props);
    const sendToParent = () => {
      emit('childEvent', 'Hello from child');
    };
    return { sendToParent, message };
  }
});
</script>

四、路由（Vue Router）集成（以下代码前提需要先安装配置好Vue Router）

定义路由和导航

在router/index.js中定义路由。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在组件中进行导航。

<template>
  <button @click="navigateToAbout">Go to About</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const navigateToAbout = () => {
      router.push('/about');
    };
    return { navigateToAbout };
  }
};
</script>

五、状态管理工具 - Vuex与Pinia

在Vue3中，除了组件内部的状态管理，我们经常需要处理跨组件的共享状态。这时，我们可以使用Vuex或Pinia这样的状态管理工具。

Vuex的使用

首先，安装Vuex：

npm install vuex@next --save

创建一个Vuex store：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

在主文件中引入并使用store：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用Vuex：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

** Pinia的使用**

Pinia是Vue的官方状态管理库，它更加轻量且与Vue3的组合式API完美集成。

首先，安装Pinia：

npm install pinia --save

创建一个Pinia store：

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

在主文件中引入并使用Pinia：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

在组件中使用Pinia：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};
</script>