这是我参与 8 月更文挑战的第 1 天，活动详情查看： 8月更文挑战

实战

• 项目创建(通过VueCLI创建)
  • vue create 项目名
  • 选择项目配置依赖
  • cd 项目名(出现git提示，选择是)
  • npm run serve

搭建项目架构

身份验证

• 没有身份验证的话，就像自己家只有一个门，但是没有墙，可以从旁边直接进去

Vuex

• 专门为Vue.js应用程序开发的状态管理模式。
• 适用于：多个组件中进行传值

Vuex安装与引入

Vuex-State

• 通过$store.state.count
  • $store.state中存储公共的数据
  • 注意：视图中不需要写this，但是js中需要写

Vuex-Mutation

• 更改 Vuex 的 store 中的状态的唯⼀⽅法是提交 mutation
  • mutations定义不同名称的事件，通过commit(事件名)来触发
• 提交载荷（payload）
  • commit(事件名，参数)
    • 大多数情况下，payload应该是一个对象。payload.count

Vuex-Action

• 将同步和异步操作分开，actions里面存储异步操作，mutatios里面存储同步操作。
• 最终调用具有异步功能的事件名称，通过this.$store.dispatch('jiaHandle',{ count:5 , delay:2000 });
• context与store相同

身份认证-登陆状态存储

• 存储到vuex，再存储到本地的localstorge中，最后再从中读取出来赋给vuex中的变量
  • 因为页面刷新，vuex中的数据就会丢失。

 // store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 user: null
 },
 mutations: {
 },
 actions: {
 },
 modules: {
 }
})

身份认证-校验页面访问权限

• 通过meta设置，再通过路由的导航守卫进行拦截操作
• 只有需要去访问的路径to，没有需要验证的或者所有需要验证的都通过，才能进行跳转。
  • 遍历数组

// router/index.js
 router.beforeEach((to, from, next) => {
 console.log('to:', to)
 console.log('from:', from)

 // 官⽅示例，检测路由是否需要登录
 if (to.matched.some(record => record.meta.requiresAuth)) {
 // to 路由要求具有登录状态，检测⽤户是否登录
 }
 next()
 })