〖Vue〗小知识-定义路由从Vuex获取数据展示到页面

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文我们学习 Vuex 通过 axios 向后端发起请求, 将请求到的数据存到 Vuex Store 中, 在页面中通过特定接口调用使用数据. 本文就来将请求到的数据通过定义路由, 展示到页面中. 相当于实际项目的 用户列表, 商品列表的数据的展示效果.

前言: Vuex 是什么及文档

Vuex 官方文档: vuex.vuejs.org/zh/

1. Vuex 同步改数据 mutations 里面存的是同步改数据的方法
2. Vuex 异步改数据 Action 存放的是异步改数据的方法

将 Vuex 通过 axios 异步请求的数据展示到页面

接上文, 上文演示了 Vuex 通过 axios 向后端发起请求, 将请求到的数据存到 Vuex Store 中, 这里学习异步获取的数据通过定义路由, 在访问时候展示数据:

1. 定义对应路由

这里前文学习定义了两个数据对象, users 和 goods, 所以我们这里 定义两个路由对应两个页面

// src/router/index.js 路由定义模块
import Vue from 'vue'
import Router from 'vue-router'
/// 引入页面模板
import Users from '@/components/Users'
import Goods from '@/components/Goods'

Vue.use(Router)

export default new Router({
  mode: 'history',

  routes: [
    {
      path: '/',
      redirect: { name: 'users' }, // 重定向到name为 users 的路由
    },
    {
      path: '/users',
      name: 'Users',
      component: Users,
    },
    {
      path: '/Goods',
      name: 'Goods',
      component: Goods,
    },
  ],
})

2. 路由定义了, 再编写对应的页面模板

在 src/components 中定义两个页面: Users.vue 和 Goods.vue

1. 然后在模板使用数据:

/// Users.vue

<template>
  <div class="users">
    <ul>
      <li v-for="(user, index) in userLists" :key="user._id">{{ user._id }}: {{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Users',
    computed: {
      // computed 计算属性, 是在 HTML DOM 加载后马上执行的!
      userLists() {
        return this.$store.state.users
      },
    },
    destroyed() {
      console.log('component destroyed')
    },
  }
</script>

/// Goods.vue

<template>
  <div class="users">
    <ul>
      <li v-for="(good, index) in goodLists" :key="good._id">{{ good._id }}: {{ good.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Users',
    computed: {
      goodLists() {
        return this.$store.state.goods
      },
    },
    destroyed() {
      console.log('component destroyed')
    },
  }
</script>

参考 官方文档

• Vuex 官方文档: vuex.vuejs.org/zh/