前端学习（十二）导航栏登录模块优化——vuex入门使用

接上一篇的最后，优化登录状态的刷新。
晚上查了一晚上资料，大概看到有三种解决这个状态不能跟随localStorage的变化一起更新的问题。

1. 写一个监听事件，监听sstorage的set之类的方法，总之只要存在修改的动作，就触发更新状态，我没尝试，应该是可行，只是我觉得不优雅。始终开着一个监听事件感觉不太合理，这个状态变更是很不频繁的。
2. 监听localStorage的变化，这个和上面那个大同小异。本质一样。
3. 用vuex做状态管理，其实对于这个问题也是大材小用

我自己觉得最符合需求的方案是设置一个全局变量isLogin（其实localStorage也是这么个角色，只是vue没法直接感知到他的变化而反馈到视图上），在做状态变更的时候，调用某个函数，把这个全局变量也一起修改了。页面上是能实时更新的。
其实我查资料下来觉得vuex干的就是这事，只是他会更专业，更规范，既然人家有这么专业的组件，我就用呗，说不定以后也用得上，就顺便学学。
vuex说实在，我是觉得不太好理解，可能昨晚有点困了，思路不清晰，看了很久也没完全理解他的设计思路，于是洗个澡回来，总算把功能实现了。后面会专门再研究一下，把他拿出来单独写写。

vuex入门使用

我在网上查资料时，最困惑的一点就是，看着各种各样的描述，觉得它是做这事的，但是就没法肯定，他确实是做这事的，就是没有适合小白入门的那种描述（我现在写的也不是，以后有空再写）。官方文档的描述很官方，什么状态管理啥的，我到现在没完全了解清楚，就不说太多自己的观点，容易说错。总之他帮我解决了现在的需求（需求看上一篇）。
这个组件不是vue自带的，那么就先安装一下：

cnpm i vuex -g

定义store

先在“src”目录下新建“store”文件夹，再在里面新建“index.js”，你要问我为什么这么取名字，因为大家都是这么取得。先这么用着吧，以后再讨论。

import Vue from "vue"
import Vuex from "vuex"
import storageUtil from "@/utils/storageUtil";

Vue.use(Vuex);

export default new Vuex.Store({
    // 其实类似定义全局变量，可以定义很多个
    state: {
        isLogin: false
    },
    // 其实就是定义操作全局变量的方法，也可以有很多个
    mutations: {
        updateLoginState(state) {
            state.isLogin = storageUtil.get("isLogin") != null;
        }
    }
})

可以看到上面的内容很简单，相当于定义了一个全局变量“isLogin”，然后定义了一个操作全局变量的方法“updateLoginState”，那个入参“state”暂时好像是要这么写着，不写他报错，以后再优化一下。暂时不知道能不能省去。

定义了store，还要在main.js里面引入，像router一样：
先导入：

import store from "@/store/index"

再引入：

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

引用这个全局变量

相比上一篇的menuLoginBar.vue，改变了较多地方，这里先贴出改变后的：

<template>
  <el-dropdown style="float: right">
    <div>
      <router-link v-if="!this.$store.state.isLogin" to="/login" style="color: white">登录</router-link>
      <i v-if="this.$store.state.isLogin" class="el-icon-user-solid" style="color: white">
        <el-dropdown-menu>
          <el-dropdown-item>
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </i>
    </div>
  </el-dropdown>
</template>
<script>

export default {
  name: "loginView",
  created() { // 当改组件最vue渲染加载时调用。也就是第一次加载时
    // 先检查浏览器是否支持storage，不支持就弹窗告诉用户，如果需要还可以进一步限制用户的使用
    if (!window.localStorage) {
      alert("浏览器不支持localstorage，请更换更高版本的浏览器")
    }
    // commit就是显式触发对全局变量的更新，这个vuex所要求的，所有要对全局变量更新的地方都得显式的调用commit，而入参便是mutations里的方法名称
    this.$store.commit('updateLoginState')
  }
}
</script>

注意这里一行：

<router-link v-if="!this.$store.state.isLogin" to="/login" style="color: white">登录</router-link>

v-if里面直接用“全局变量” “isLogin”，非常体现他全局变量的特点，我就先不管这么用会不会不规范，有问题啥的了。能实现功能就好。
然后export default里面就简单了，原来的内容基本都不需要了，就新增了个created，它是会在打开网页后渲染组件的时候调用，也就是最开始调用一次，后面就不会再调用了，这是为了解决以前的登录信息仍然保留在localstorage时，重新打开网页不能识别以前的登录信息的问题，可以理解为初始化。

这里功能已经都实现完了，但是别忘了，vuex的规范是在所有更改“全局变量”的地方要显式调用commit方法去修改，所以我们在登录成功后，就需要添加该方法，语句就是：

this.$store.commit('updateLoginState')

比如我的登录页面，登陆成功后，不但要记录localSotorage，还要显式更新isLogin。