在setup函数中实现路由跳转

由于在setup()函数中不能使用this，所以要用路由的API进行跳转和接收路由参数，需要使用路由的钩子函数来实现。

示例：在页面中实现路由跳转

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'Home',
  setup() {
    let router = useRouter();
    let goPage = (url: string) => {
      router.push(url);
    };
    return {
      goPage,
    };
  },
});
</script>

setup函数中使用Vuex

在setup函数中使用Vuex传递值和使用路由的思路是一样的，同样需要使用Vuex内部的钩子函数来实现对state、getter、mutation、action的操作。

示例：在setup函数中使用Vuex内部的钩子函数来实现对state、getter、mutation、action的操作。

新建一个文件夹store

// counters.ts
export default {
  namespaced: true,
  state: {
    count: 1,
    users: [
      { name: '张三', age: 18 },
      { name: '李四', age: 22 },
      { name: '王五', age: 12 },
    ],
  },
  
  getters: {
    // 筛选vuex中指定条件的数据并返回
    getUsers(state: { users: Array<object> }, getters: any, rootState: any) {
      let users = state.users.filter((res: any) => {
        return res.age >= 18;
      });
      return users;
    },
  },
  
  mutations: {
    ['INC_COUNT'](state: { count: number }, payload: any) {
      state.count++;
    },
    ['SET_COUNT'](state: { count: number }, payload: { count: number }) {
      state.count = payload.count;
    },
  },

  // 在actions中使用promise做了一个延时处理，使页面中点击事件触发一秒后改变值；
  actions: {
    async setCount(conText: any, payload: { count: number }) {
      let count = await new Promise((resolve: Function, reject: Function) => {
        setTimeout(() => {
          resolve(payload.count);
        }, 1000);
      });
      conText.commit('SET_COUNT', { count: count });
      return Promise.resolve(count);
    },
  },
};

在index.ts中导入刚新建文件：

import { createStore } from 'vuex';
import counter from './modules/counter';

export default createStore({
  modules: {
    counter,
  },
});

然后在页面中进行使用：

<template>
  <div>
    <div>计数器：{{ count }} <button @click="increase()">+</button></div>
    <div v-for="(item, index) in getUsers" :key="index">
      {{ item.name }}，{{ item.age }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  name: 'store',
  setup() {
    let store = useStore();
    // 获取count值时候的简单使用
    let count = computed(() => store.state.counter.count);
    
    let getUsers = computed(() => store.getters['counter/getUsers']);
    
    let increase = () => {
      // store.commit("counter/INC_COUNT")
      store.dispatch('counter/setCount', { count: 1000 }).then((count) => {
        console.log('setCount执行成功，count的值为：' + count);
      });
    };
    return {
      count,
      getUsers,
      increase,
    };
  },
});
</script>

学习的时候最好在页面中实际操作一下，大致上和vue2中的写法差不多。

接下来继续学习Vue3的知识点~

Vue3新特性的学习（十）——深入学习setup函数

在setup函数中实现路由跳转

setup函数中使用Vuex