使用vuex和路由守卫

1、接口文档

2、vuex

 

 

2.1、vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2.2、为什么要用vuex？

进行统一的状态管理，解决不同组件共享数据的问题。

不同视图需要变更同一状态的问题。

使用vuex之后，状态变化更加清晰。

2.3、如何使用vuex？

1.安装引入 npm install vuex --save

2.注册到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
 
        }
 
    }
 
})

1. 挂载在vue实例上

 new Vue({
 
    store
 
})

1. 在组件中就可以通过this.$store对vuex进行操作。

2.4、核心概念

2.4.1、state

1.state是什么？ 是一个单一状态树，是vuex中为一个的数据源，我们的数据都是放在state中的。

2.组件中去取state的值，通过this.$store.state，

3.或者可以通过计算属性取得,mapState辅助函数，可以简化操作

 import {mapState} from "vuex";
 
computed: {
 
    // 可以写一些其他的计算属性
 
    ...mapState({
 
      // title: state => state.title
 
      // title: "title"
 
      title: state => {
 
        return state.title;
 
      }
 
    })
 
  }

2.4.2、getters

1.对state中的数据进行加工（派生）

2.取getters中的值,通过this.$store.getters，

3.或者通过计算属性取，getters也有辅助函数mapGetters， 用法和mapState一致。

4.  import { mapGetters} from "vuex";

5.computed: {

 6.  // 可以写一些其他的计算属性

7.    ... mapGetters ({
8.      title: "title"

9.    })

10.  }

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

怎么定义？
 

 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
 
  }
 
})

1. 命名空间

1. 默认state就是有命名空间

2. 如果想给mutation和action也加上命名空间的话，这里设置模块的namespaced：true

 

const moduleA = {
 
  namespaced:true,
 
  state: { ... },
 
  mutations: { 
 
    changeName(){}
 
  },
 
  actions: { ... },
 
  getters: { ... }
 
}
 
// this.$store.commit('a/changeName') 

1. 命名空间之后使用辅助函数createNamespacedHelpers

 

3、导航守卫（路由守卫）