项目展示

客户端使用的vue

功能

主要功能，三个页面，home， about， login三个页面，home可以匿名访问，about必须登录才能访问，login登录页面

新的技能点

vuex的模块化的使用
以及vue打包后页面刷新后找不到页面的解决办法

• 服务器使用 connect-history-api-fallback 插件

  vuex的模块化展示

  文档：https://vuex.vuejs.org/zh/guide/modules.html

  示例：

  ```javascript import Vue from ‘vue’ import Vuex from ‘vuex’ import loginUser from ‘./loginUser’

Vue.use(Vuex)

export default new Vuex.Store({ modules: { loginUser, } });

模块化的loginUser
```javascript
import * as axios from '../service/login.service'
export default {
  namespaced: true,
  state: {
    data: null,
    isLoading: false
  },
  mutations: {
    setData(state, data) {
      state.data = data;
    },
    setLoading(state, payload) {
      state.isLoading = payload;
    },
    resetData(state) {
      state.data = null;
      localStorage.removeItem('token')
    }
  },
  actions: {
    async login({ commit }, {loginId, loginPwd}) {
      commit('setLoading', true);
      const res = await axios.login(loginId, loginPwd);
      commit('setData', res.data);
      commit('setLoading', false);
      return res.data;
    },
    loginOut({commit}) {
      commit('setData', null);
      axios.loginOUt();
    }
  },
};

使用模块化的vuex

辅助函数的形式使用

<template>
  <div>
    <h1>登录</h1>
    <button @click="handleClick">login</button>
  </div>
</template>
<script>
import {mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('loginUser',['data'])
  },
  methods: {
    ...mapActions('loginUser',['login']),
    async handleClick() {
      const res = await this.login({
        loginId: 'z',
        loginPwd: '123456'
      })
      if(res) {
        this.$router.push('/')
      } else {
        alert('cuowu')
      }
    }
  },
}
</script>
<style>
</style>

通过this调用

this.$store.dispatch("loginUser/loginOut");