Vue写项目中知识点记录

常用实用的小方法

  后退上一页:  $router.back() 或 $router.go(-1)  向前或在向后推几个页面数值可以为负数
    @click="$router.back()"  点击后退

本地存储和vuex中states存储

export const getItem = (key) => {
    const data = window.localStorage.getItem(key);
    try {
        return JSON.parse(data);
    } catch (error) {
        return data;
    }
};
export const setItem = (key, value) => {
    if (typeof value === "object") {
        value = JSON.stringify(value);
    }
    window.localStorage.setItem(key, value);


//分别封装在不同的js文件中,方便调用维护



export default new Vuex.Store({
  state: {
    user: getItem(TOKEN_KEY)
    // user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
  },
  getters: {},
  mutations: {
    setUser (state, data) {
      state.user = data
      // window.localStorage.setItem(TOKEN_KEY, JSON.stringify(data));
      setItem(TOKEN_KEY, state.user)
    }
  },
  actions: {},
  modules: {}
})

判断用户是否登录了  然后根据信息展示不同的页面或者需求

//导入
import { mapState } from 'vuex'
   
//在computed中将user映射为当前组件的计算属性

computed: {
    ...mapState(['user'])
},

//计算属性可以直接调用,简单实用  当做判断条件也是可以的  user表示用户登录 

退出登录 搭配vant 实现退出后去除token值

onLogout () {
  // 退出提示
  // 在组件中需要使用 this.$dialog 来调用弹框组件
  this.$dialog.confirm({
    title: '确认退出吗？'
  }).then(() => {
    // on confirm
    // 确认退出：清除登录状态（容器中的 user + 本地存储中的 user）
//让vuex中存储的token和本地存储的值为null
    this.$store.commit('setUser', null)
  }).catch(() => {
    // on cancel
    console.log('取消执行这里')
  })
}

其他

过程中可以温顾很多之前的知识,因为写的是移动端的项目,用的flex布局还是很好用的.

vant库中很多的移动端插件,特别实用

之前的axios在项目中利用率很高.分离式的封装api,请求头等前期很是不适应,但是后续使用会极大的方便维护