Vuex的简单实例(2)

深入Vuex

1）前面我们已经配置了vue-router，修改App.vued的template

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2）在src/components新建Home.vue、Login.vue

// Home.vue
<template>
  <div class="home">首页</div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<template>
  <div class="login">登录页</div>
</template>

<script>
export default {
	name: 'Login'
};
</script>

4）配置routes，添加meta验证字段，true就需要用户登录，反之则不需要（权限）。

import Home from '@/components/Home'
import Login from '@/components/Login'

export default [
    {
        path: '/',
        component: Home,
        meta: { auth: true }
    },
    {
        path: '/login',
        component: Login,
        meta: { auth: false}
    }
]

导航守卫

1）配置导航守卫判断进入当前页面是否需要权限，首先在store添加isLogin、username、password段：,

...
const store = new Vuex.Store({
	state = {
		count: 0，  // 定义count
		isLogin: false,
		username: '', //用户名
        password: '', //密码
	}
})
....

2）在main.js配置路由拦截：

router.beforeEach((to, from, next) => {
  console.log(to) // 打印to里面的信息
  if (to.meta.auth) { // 判断路由meta.auth字段是否为true
    if (to.path == '/login') { // 如果路由为login直接pass
      next()
    } else {
      if (store.state.isLogin == true) { // 否则就判断store里面的isLogin是否为true
        next() // 如果为true就pass
      } else {  // 否则就跳到login页面
        next({
          path: '/login'
        })
      }
    }
  }else{
    next()
  }
})

3）修改Home.vue

// Home.vue
<template>
  <div class="home">
   登录状态：{{ $store.state.isLogin }}
    <br />
    用户名：{{ $store.state.username }} ，你好！
    <br />
    密码：{{ $store.state.password }}
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>

Vuex之mutations

1）更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

// store.js
...
const store = new Vuex.Store({
	state = {
		count: 0，  // 定义count
		isLogin: false,
		username: '', //用户名
        password: '', //密码
	},
	mutations: {
		// 修改登录状态
        changeLogin(state, data) {
            state.isLogin = data
        },
        // 修改用户名状态
        changeUsername(state, data) {
            state.username = data
        },
        // 修改密码状态
        changePassword(state, data) {
            state.password = data
        }
	}
})
....

2）在组件中不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。 ”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法，修改Login.vue：

// Login.vue
<template>
  <div class="login">
    登录状态：{{ $store.state.isLogin }}
    <br />
    <i-Input
      type="text"
      v-model="username"
      placeholder="username"
      style="width: 300px"
      maxlength="10"
      show-word-limit
    />
    <br />
    <i-Input
      type="password"
      v-model="password"
      placeholder="username"
      style="width: 300px"
      @keyup.enter.native="loginHandle"
      maxlength="15"
      show-word-limit
    />
    <br />
    <Button type="primary" @click="loginHandle">登录</Button>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    loginHandle() {
      // 表单验证
      if (!this.username || !this.password) return;
      // 修改isLogin状态
      this.$store.commit('changeLogin', true);
      // 修改username状态
      this.$store.commit('changeUsername', this.username);
      // 修改password状态
      this.$store.commit("changePassword", this.password); 
      this.$router.push("/"); // 跳到首页
    }
  }
};
</script>

运行项目效果图：