[更新]简化 vuex 职责

src/App.vue

@@ -10,21 +10,6 @@
 
 <style lang="scss">
 #app {
-  /*font-family: "Avenir", Helvetica, Arial, sans-serif;*/
-  /*-webkit-font-smoothing: antialiased;*/
-  /*-moz-osx-font-smoothing: grayscale;*/
-  /*text-align: center;*/
-  /*color: #2c3e50;*/
   background: #f4f7fb;
 }
-/*#nav {*/
-/*padding: 30px;*/
-/*a {*/
-/*font-weight: bold;*/
-/*color: #2c3e50;*/
-/*&.router-link-exact-active {*/
-/*color: #42b983;*/
-/*}*/
-/*}*/
-/*}*/
 </style>

src/store/auth.module.js

@@ -1,62 +0,0 @@
-import { login, register } from "@/api/auth";
-import { LOGIN, LOGOUT, REGISTER } from "@/store/type/actions.type";
-import {
-  SET_AUTH,
-  SET_LOGIN_ERROR,
-  REMOVE_AUTH,
-  SET_REGISTER_ERROR,
-  SET_PROFILE
-} from "@/store/type/mutations.type";
-import { getToken, destroyToken, saveToken } from "@/util/tokenStorage";
-
-const state = {
-  isAuthenticated: !!getToken(),
-  isLoginError: false,
-  isRegisterError: false
-};
-
-const actions = {
-  async [LOGIN](context, credentials) {
-    try {
-      const { token, user } = await login(credentials);
-      context.commit(SET_PROFILE, user);
-      context.commit(SET_AUTH, { token, profile: user });
-      context.commit(SET_LOGIN_ERROR, false);
-    } catch (e) {
-      context.commit(SET_LOGIN_ERROR, true);
-    }
-  },
-  [LOGOUT](context) {
-    context.commit(REMOVE_AUTH);
-  },
-  async [REGISTER](context, credentials) {
-    try {
-      await register(credentials);
-    } catch (e) {
-      context.commit(SET_REGISTER_ERROR, true);
-    }
-  }
-};
-
-const mutations = {
-  [SET_LOGIN_ERROR](state, error) {
-    state.isLoginError = error;
-  },
-  [SET_REGISTER_ERROR](state, error) {
-    state.isRegisterError = error;
-  },
-  [SET_AUTH](state, { token, profile }) {
-    state.isAuthenticated = true;
-    saveToken(token, profile);
-  },
-  [REMOVE_AUTH](state) {
-    state.isAuthenticated = false;
-    destroyToken();
-  }
-};
-
-export default {
-  state,
-  actions,
-  mutations
-};

src/store/index.js

@@ -1,14 +1,12 @@
 import Vue from "vue";
 import Vuex from "vuex";
 
-import auth from "./auth.module";
-import user from "./user.module";
+import user from "./modules/user.module";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
-    user,
-    auth
+    user
   }
 });

src/store/modules/user.module.js

@@ -0,0 +1,28 @@
+import * as ACTIONS from "@/store/type/actions.type";
+import * as MUTATIONS from "@/store/type/mutations.type.js";
+import { getUserProfile, saveProfile } from "@/util/profileStorage";
+import { fetchUserProfile } from "@/api/user";
+
+const userState = {
+  profile: getUserProfile() || {}
+};
+
+const actions = {
+  async [ACTIONS.FETCH_PROFILE](context, userId) {
+    const { data } = await fetchUserProfile(userId);
+    context.commit(MUTATIONS.SET_PROFILE, data);
+  }
+};
+
+const mutations = {
+  [MUTATIONS.SET_PROFILE](state, userSerializer = {}) {
+    state.profile = userSerializer;
+    saveProfile(userSerializer);
+  }
+};
+
+export default {
+  state: userState,
+  actions,
+  mutations
+};

src/store/type/actions.type.js

@@ -1,7 +1 @@
-export const LOGIN = "login";
-export const REGISTER = "register";
 export const FETCH_PROFILE = "fetchProfile";
-export const FETCH_PHOTOS = "fetchPhotos";
-export const POST_PHOTOS = "postPhotos";
-export const LOGOUT = "logout";
-export const ORDER_BY = "orderBy";

src/store/type/mutations.type.js

@@ -1,8 +1 @@
-export const SET_LOGIN_ERROR = "setLoginError";
-export const SET_REGISTER_ERROR = "setRegisterError";
-export const SET_AUTH = "setAuthorization";
 export const SET_PROFILE = "setProfile";
-export const REMOVE_AUTH = "removeAuthorization";
-export const SET_PHOTOS = "setPhotos";
-export const SET_ORDER = "setOrder";
-export const SET_LAST_SEARCH = "setLastSearch";

src/store/user.module.js

@@ -1,83 +0,0 @@
-import { fetchUserAuthProfile } from "@/api/user";
-import {
-  FETCH_PROFILE,
-  FETCH_PHOTOS,
-  POST_PHOTOS,
-  ORDER_BY
-} from "@/store/type/actions.type";
-import {
-  SET_PROFILE,
-  SET_PHOTOS,
-  SET_ORDER,
-  SET_LAST_SEARCH
-} from "@/store/type/mutations.type";
-import { fetchUserPhotos, postUserPhotos } from "@/api/photo";
-
-const LATEST = "LATEST";
-
-const state = {
-  profile: {
-    id: undefined,
-    username: undefined,
-    nickname: undefined
-  },
-  photos: [],
-  orderType: LATEST,
-  searchBy: -1,
-  lastSearch: -1
-};
-
-const actions = {
-  async [FETCH_PROFILE](context) {
-    if (context.state.profile) {
-      const newProfile = await fetchUserAuthProfile(context.state.profile.id);
-      context.commit(SET_PROFILE, newProfile);
-    }
-  },
-  async [FETCH_PHOTOS](context, tag = -1) {
-    let searchTag = tag;
-    if (tag === "") {
-      searchTag = -1;
-    }
-    const photos = await fetchUserPhotos({
-      tag: searchTag,
-      sort: context.state.orderType
-    });
-    context.commit(SET_PHOTOS, photos);
-    context.commit(SET_LAST_SEARCH, tag);
-  },
-  async [POST_PHOTOS](context, { files, onload }) {
-    if (context.state.profile) {
-      postUserPhotos(context.state.profile.id, files, onload);
-    }
-  },
-  async [ORDER_BY](context, type) {
-    context.commit(SET_ORDER, type);
-    const photos = await fetchUserPhotos({
-      tag: context.state.lastSearch,
-      sort: type
-    });
-    context.commit(SET_PHOTOS, photos);
-  }
-};
-
-const mutations = {
-  [SET_PROFILE](state, profile) {
-    state.profile = profile;
-  },
-  [SET_PHOTOS](state, photos = []) {
-    state.photos = photos;
-  },
-  [SET_ORDER](state, type) {
-    state.orderType = type;
-  },
-  [SET_LAST_SEARCH](state, search) {
-    state.lastSearch = search;
-  }
-};
-
-export default {
-  state,
-  actions,
-  mutations
-};

src/util/profileStorage.js

@@ -18,7 +18,7 @@ export const getUserProfile = () => {
   try {
     profile = JSON.parse(profileText);
   } catch (e) {
-    throw new Error("profile not found");
+    profile = {};
   }
   return profile;
 };