这需要一个完整的例子。
我先依照先前讲的把程序码先准备好
准备了两个页面: User, Users
为了示范上面用一个 nav 来切换。
切换到 User 时,hard code 了它的 id。
(其实之後也可以做在 Users 上面的 link)
可以到 mockAPI 上面设定一组。
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
},
});
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;
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',
};
Apiary 介面分4个区块:功能列区、编辑区、预览区、测试区。 今日要点: 》Apiary 介面...
昨天已经教大家如何打印出想要的东西了,今天要来教大家输入资料。 a=input() print(a)...
今天我们来还债 XDD,还之前跳过的很多解释,还有如何更加灵活的调整神经网路 那就让我们一步一步来...
ShareX 是开源的高级截图工具和屏幕记录器。使用 ShareX,只需要一个快捷键就可以保存截图到...
清单设计 我们先将清单分成多个不同小块来设计,最後再将它们组起来 清单架构 <ul class...