2.1、vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储,管理应用中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2.2、为什么要用vuex?
-
进行统一的状态管理,解决不同组件共享数据的问题。
-
不同视图需要变更同一状态的问题。
-
使用vuex之后,状态变化更加清晰。
-
2.3、如何使用vuex?
-
安装引入 npm install vuex --save
-
注册到vue中
-
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
-
实例化vuex的store
-
const store = new Vuex.Store({ state: { count: 0, title:'vuex中的title' }, mutations: { increment(state,count) { state.count=count } } })
-
挂载在vue实例上
-
new Vue({ store })
-
在组件中就可以通过this.$store对vuex进行操作。
-
2.4、核心概念
2.4.1、state
-
state是什么? 是一个单一状态树,是vuex中为一个的数据源,我们的数据都是放在state中的。
-
组件中去取state的值,通过this.$store.state,
-
或者可以通过计算属性取得,mapState辅助函数,可以简化操作
-
import {mapState} from "vuex"; computed: { // 可以写一些其他的计算属性 ...mapState({ // title: state => state.title // title: "title" title: state => { return state.title; } }) }
2.4.2、getters
-
对state中的数据进行加工(派生)
-
取getters中的值,通过this.$store.getters,
-
或者通过计算属性取,getters也有辅助函数mapGetters, 用法和mapState一致。
-
import { mapGetters} from "vuex";
-
computed: {
-
// 可以写一些其他的计算属性
-
... mapGetters ({
-
title: "title"
-
})
-
}
-
2.4.3、mutation
-
修改state中的值,我们state每次变化,都应该由mutation去修改,方便追踪数据的流转。
-
定义mutation
-
const store = new Vuex.Store({ // .... mutations: { increment(state, count) { state.count = count }, [CHANGE_TITLE](state, payload) { state.title = payload.title; // 不能这么写的 state.obj = { ...state.obj, title:payload.title } } } })
-
调用mutation
-
this.$store.commit('mutation类型(函数名)',"参数,参数一般是对象形式")
-
this.$store.commit({type:'mutation类型(函数名)'},...其他参数)
-
注意事项
-
要遵循vue相应式变化的规则,简单说就是对于对象的赋值,要用新对象替换老对象。
-
mutation的type或者说是函数名可以用常量维护。
-
mutation函数必须是同步的。
-
2.4.4、action
-
action类似于mutation,不同的是
-
action可以包含异步操作
-
action不能直接修改state,如果想修改state的话,需要触发mutation
-
2.怎么定义?
-
actions: { // 通过context(上下文环境)可以触发mutation,触发action,获取state、getter等操作 // 第二个参数就是我们传递过来的参数 changeTitle(context,payload) { setTimeout(() => { context.commit(CHANGE_TITLE, payload) }, 1000); } }
-
怎么触发action
-
this.$store.dispatch('action名字','参数')
-
this.$store.dispatch({type:'action类型(函数名)'},...其他参数)
-
2.4.5、module
-
由于使用单一的状态树,项目中的状态会集中在一起,导致难以维护,这个时候可以通过module对store进行拆分。
-
使用module之后,每个模块都有自己的state、mutation等内容,方便维护
-
如何定义
-
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })
3、导航守卫(路由守卫)
-
3.2、全局前置守卫
-
你可以使用 router.beforeEach 注册一个全局前置守卫:
-
你可以使用 router.beforeEach 注册一个全局前置守卫:
router.beforeEach((to, from, next) => {
console.log(to):
console.log(from)
console.log(next)
})
分析:
// 路由前置守卫
// to 跳转后的页面
// from 跳转前的页面
// next 是函数
// 直接调用 next() 允许跳转
// next(false) 不允许跳转
// next('/index') 代表要跳转到首页
router.beforeEach( ( to , from , next ) => {
// 在跳转之前就可以增加逻辑判断了,根据不同的状态判断能否跳转到指定的页面
// 比如搜索页面需要登录后才可以进入
if(to.meta.isLogin){
// 需要登录
// 判断是否登录 写判断是否登录
next("/")
}else {
// 不需要登录
next()
}
// next(false)
// 判断 那些页面是需要登录的 那些页面是不需要登录的
} )
//注意: 确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错
-
3.3、路由独享的守卫
你可以在路由配置上直接定义 beforeEnter 守卫:这些守卫与全局前置守卫的方法参数是一样的。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})