表单攻略前准备

这需要一个完整的例子。

我先依照先前讲的把程序码先准备好

先看画面

准备了两个页面: User, Users
为了示范上面用一个 nav 来切换。

切换到 User 时,hard code 了它的 id。
(其实之後也可以做在 Users 上面的 link)

准备 API

可以到 mockAPI 上面设定一组。

准备程序码

Store

src/store/user/index.js

import actions from './actions';

export default {
  actions,
  state: {
    one: {},
    list: []
  },
  mutations: {
    user (state, payload) {
      state.one = payload
    },
    users (state, payload) {
      state.list = payload
    }
  },
  getters: {
    user (state) {
      return state.one;
    },
    users (state) {
      return state.list;
    },
  },
};

src/store/user/actions.js

import backendAPI from '@/utility/backendAPI';

export default {
  async fetchUser({ commit }, id) {
    const res = await backendAPI.GET(`/user/${id}`);
    commit('user', res.data);
  },
  async fetchUsers({ commit }) {
    
    const res = await backendAPI.GET('/user');
    commit('users', res.data);
  },
  async createUser({ dispatch }, { id, name, avatar }) {
  	const res = await dispatch('uploadFile');
    await backendAPI.POST(`/user`, {
      name,
      avatar: res.data,
    });
  },
  async updateUser({ dispatch }, { id, name, avatar }) {
  	const res = await dispatch('uploadFile');
    await backendAPI.PUT(`/user/${id}`, {
      name,
      avatar: res.data,
    });
  },
  async deleteUser(context, id) {
    await backendAPI.DELETE(`/user/${id}`);
  },
};

src/store/actions.js

import backendAPI from '@/utility/backendAPI';

export default {
  async uploadFile({ commit, getters }, file) {
    const res = await backendAPI.formDataPOST('/file', getters.file);
    commit('file', res.data);
  }
};

src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import user from './user';

Vue.use(Vuex);

export default new Vuex.Store({
  actions,
  state: {
    file: null
  },
  mutations: {
    file(state, payload) {
      state.file = payload;
    }
  },
  getters: {
    file(state) {
      return state.file;
    }
  },
  modules: {
    user
  },
});

Router

import Vue from 'vue';
import VueRouter from 'vue-router';
import User from '../views/User.vue';
import Users from '../views/Users.vue';
import store from '../store';

Vue.use(VueRouter);

const routes = [
  {
    path: '/user',
    name: 'Users',
    component: Users,
    beforeEnter: (to, from, next) => {
      store.dispatch('fetchUsers')
      next()
    }
  },
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    beforeEnter: (to, from, next) => {
      store.dispatch('fetchUser', to.params.id)
      next()
    }
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  console.warn(`${from.path} -> ${to.path}`);
  next()
})


export default router;

Component

App.vue

  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'Users' }">users</router-link> |
      <router-link :to="{ name: 'User', params: { id: 1 } }">user1</router-link>
    </div>
    <router-view />
  </div>

src/User.vue

先确认可以把值顺利显示出来。

<div>
  <pre>{{ $store.getters.user }}</pre>
</div>
export default {
  name: 'User',
};

src/views/Users.vue

<div>
  <pre>{{ $store.getters.users }}</pre>
</div>
export default {
  name: 'Users',
};

<<:  Day 23:最小生成树(MST)

>>:  Day21 黄金砖-金沙豆腐

【Day 26】Google Apps Script - API Blueprint 篇 - Apiary 介面介绍

Apiary 介面分4个区块:功能列区、编辑区、预览区、测试区。 今日要点: 》Apiary 介面...

Python 输入资料

昨天已经教大家如何打印出想要的东西了,今天要来教大家输入资料。 a=input() print(a)...

Day-22 更加灵活的神经网路,我们可以做哪些变化

今天我们来还债 XDD,还之前跳过的很多解释,还有如何更加灵活的调整神经网路 那就让我们一步一步来...

ShareX 对接Lsky图床实现截图和图片自上传

ShareX 是开源的高级截图工具和屏幕记录器。使用 ShareX,只需要一个快捷键就可以保存截图到...

【Side Project】 订单清单 - 画面设计2

清单设计 我们先将清单分成多个不同小块来设计,最後再将它们组起来 清单架构 <ul class...