又仔细看了一遍vuex的文档，还是云里雾里的，不过至少明白它是一个专门管理状态的，根据数据状态的改变可以驱动视图更新，既然是这样那至少登录注册是一种状态，就用登录来做测试，学习vuex,不过话说回来，既然专门管理状态，那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑。

Image 091.png

• 1、据说储存的vuex store里面的状态是临时的，右键刷新一下页面这些状态就销毁了（这是据说，请大神解惑我也没办法证实），如果是这样的话，我的用户状态user还是应该要写入sessionStorage，不然登录了的一刷新页面就变成没登录了，用户不就疯了啊。所以store里面的user状态应该要从sessionStorage里面去读。
• 2、在这个learn项目中现存的页面中，home,paroducts,FAQ，login，regin，应该是不需要登录就可以访问，而manger和manger以下的子页面是必须要登录才可以访问的。
• 3、比较特殊的是login和regin，如果用户已经登录了，再去访问这2个页面，原则上来说也是可以的，但如果已经登录了，再用其它账号来登录一次，那sessionStorage存在2个user数据，那就显然不合理了，所以应该规定，如果用户已经登录，又去访问login或者regin，那我们应先remove掉sessionStorage里面user数据
• 4、vuex规定所有状态的改变只能依靠mutation，而要驱动mutation去改变状态的只能是action。那在这个项目里登录状态变化只会有登录、注册和登出这三种情况，登录和注册成功的时候要去执行一个存在user的action，登出的时候去执行一个不存在user的action。
• 5、vuex官方还提了一个getter的玩意儿，我感觉应该是在我们需要取用store里面状态的时候，确切的说应该是取出这个状态之后，给这个状态做一些加工改变用的，而且应该只能getter一次吧，多了感觉要乱套啊（不知道这个想法对不对），但看见这样的写法this.$store.getters.doneTodosCount，感觉应该可以用不止一次把。估计我想得有点多了，目前看起来也用不上，也许要经历过需要的应用场景才能理解透彻把。
• 6、还有个module，这个就有点迷了，没太搞懂，先不管了

预想中store的登录状态还是要从sessionStorage来取的，所以我先把路由约束好，那些页面需要user，那些不需要，访问那些页面需要remove user

打开main.js
添加代码

// 这个官方名字叫导航守卫，挺形象的
router.beforeEach((to, from, next) => {
  // 如果是去登录或注册，那就先把user移除
  if (to.path === '/login' || to.path === '/regin') {
    sessionStorage.removeItem('user')
  }
  let user = JSON.parse(sessionStorage.getItem('user'))
  if (!user && (to.path === '/manger/my' || to.path === '/manger/send' || to.path === '/manger/history')) {
    next({ path: '/login' })
  } else {
    next()
  }
})

这样写感觉怪怪的，不知道有没有简单点的写法？
不过想要的效果是能达到的

Image 092.png

然后一步一步具体写

Image 093.png

是说这需要一个function?
唉哟，不对，我蠢了，这是赋值（不知道说赋值准不准确）嘛，又不是写一个obj对象，不需要逗号的哈

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 创建基本状态
const state = {
  // 登录状态为没登录
  logined: false,
  // 用户信息数据,目前只需要avatar和name,还是把username也加上吧
  LoginedUser: {
    name: '',
    avatar: '',
    username: ''
  }
}
// 创建改变状态的方法
const mutations = {
  // 改变状态的方法也需要2个，一个是登录或注册了，一个是登出了
  // 这里不能写箭头函数???
  // 登录
  LOGIN (state) {
    // 先让登录状态变为登录了
    state.logined = true
    // 然后去sessionStorage取用户数据
    let user = JSON.parse(sessionStorage.getItem('user'))
    // 再把用户数据发下去
    state.LoginedUser.name = user.name
    state.LoginedUser.avatar = user.avatar
    state.LoginedUser.username = user.username
  },
  // 登出
  LOGOUT (state) {
    // 这个同理
    state.logined = false
    state.LoginedUser.name = ''
    state.LoginedUser.avatar = ''
    state.LoginedUser.username = ''
  }
}
// 创建驱动actions可以使得mutations得以启动
const actions = {
  // 这里先来一个驱动LOGIN的东西就叫login吧
  // 这个context是官方写的，应该叫什么无所谓
  login (context) {
    context.commit('LOGIN')
  },
  // 同样来个logout
  logout (context) {
    context.commit('LOGOUT')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

我感觉应该就这样就可以了吧，还是要测试一下
不对还应该要把action挂到该挂的地方，然后该引用store状态的地方引用store的数据
先去登录页面挂action

Image 094.png

Image 095.png

Image 096.png

Image 097.png

Image 098.png

还是赶紧测试一下吧
哭了.....直接四个错误

Image 099.png

这我都是照着官方说的写的啊

Image 100.png

Image 101.png

Image 102.png

把dispatch 改成context 也不行
改成commit 试一下

Image 103.png

还是一样没脾气了，我再去看看资料吧
研究了好久解决了一部分问题

首先我把store.js，里面的action写成了这样

Image 104.png

但我觉得原来的写法也没有错

然后在main.js里面注释掉了这句

Image 105.png

然后就正常了，dispatch是正确的，所以我所担心的事果然发生了

先去登录

Image 106.png

Image 107.png

可以看见header右上方的确立刻变成了用户信息，达到了要求，然而我要是自己去地址栏输入/login

Image 108.png

Image 109.png

跳到了登录页面，但头像真的还挂在右上角........，说明store里面真的还是登录的数据，虽然仔细想想其实这并没有什么影响，他要是再一次登录成功，数据自然也就变了，而且一般没人会这么去访问登录页面，但心里觉得这样不对啊。

而且我觉得这个action的分发应该有办法写在main.js里面的，不知道有没有大神指点一二！