乐趣区

关于vue.js:Vue-Vuex状态管理

1.1 了解 Vuex

1.1.1 Vuex 是什么

  1. 概念:专门在 Vue 中实现集中式状态(数据)治理的一个 Vue 插件,对 Vue 利用中多个组件的共享状态进行集中式的治理(读 / 写),也是一种组件间通信的形式,且实用于任意组件间通信。
  2. Github 地址

1.1.2 什么时候应用 Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为须要变更同一状态

1.1.3 Vuex 工作原理图

<img src=”https://vuex.vuejs.org/flow.png” alt=”flow.png” style=”zoom:67%;” />

1.2 搭建 Vuex 环境与根本应用

1.2.1 环境 Vuex 搭建

  1. 创立文件:src/store/index.js

    // 引入 Vue 外围库
    import Vue from 'vue'
    // 引入 Vuex
    import Vuex from 'vuex'
    // 利用 Vuex 插件
    Vue.use(Vuex)
    
    // 筹备 actions 对象——响应组件中用户的动作
    const actions = {}
    // 筹备 mutations 对象——批改 state 中的数据
    const mutations = {}
    // 筹备 state 对象——保留具体的数据
    const state = {}
    
    // 创立并裸露 store
    export default new Vuex.Store({
        actions,
        mutations,
        state
    })
  2. main.js 中创立 vm 时传入 store 配置项

    ......
    // 引入 store
    import store from './store'
        ......
        // 创立 vm
        new Vue({
            el:'#app',
            render: h => h(App),
            store
        })

1.2.2 根本应用

  1. 初始化数据、配置 actions、配置 mutations,操作文件 store.js

    // 引入 Vue 外围库
    import Vue from 'vue'
    // 引入 Vuex
    import Vuex from 'vuex'
    // 援用 Vuex
    Vue.use(Vuex)
    
    const actions = {
        // 响应组件中加的动作
        jia(context,value){// console.log('actions 中的 jia 被调用了',miniStore,value)
            context.commit('JIA',value)
        },
    }
    
    const mutations = {
        // 执行加
        JIA(state,value){// console.log('mutations 中的 JIA 被调用了',state,value)
            state.sum += value
        }
    }
    
    // 初始化数据
    const state = {sum:0}
    
    // 创立并裸露 store
    export default new Vuex.Store({
        actions,
        mutations,
        state,
    })
  2. 组件中读取 Vuex 中的数据:$store.state.sum
  3. 组件中批改 Vuex 中的数据:$store.dispatch('action 中的办法名', 数据)$store.commit('mutations 中的办法名', 数据)

    备注:若没有网络申请或其余业务逻辑,组件中也能够越过 actions,即不写 dispatch,间接编写 commit

1.3 Vuex 外围概念和 API

1.3.1 state

  1. Vuex 治理的状态对象
  2. 它应该是惟一的
  3. 示例代码:

    const state = {sum:0}

1.3.2 actions

  1. 值为一个对象,蕴含多个响应用户动作的回调函数
  2. 通过 commit() 来触发 mutation 中函数的调用,间接更新 state
  3. 如何触发 actions 中的回调?

    在组件中应用:$store.dispatch('对应的 action 回调名') 触发

  4. 能够蕴含异步代码(定时器,ajax 等等)
  5. 示例代码:

    const actions = {
        // 响应组件中加的动作
        jia(context,value){// console.log('actions 中的 jia 被调用了',miniStore,value)
            context.commit('JIA',value)
        },
    }

1.3.3 mutations

  1. 值是一个对象,蕴含多个间接更新 state 的办法
  2. 谁能调用 mutations 中的办法?如何调用?

    action 中应用:commit('对应的 mutations 办法名') 触发

  3. mutations 中办法的特点:不能写异步代码、只能单纯的操作 state
  4. 示例代码:

    const mutations = {
        // 执行加
        JIA(state,value){// console.log('mutations 中的 JIA 被调用了',state,value)
            state.sum += value
        }
    }

1.3.4 getters

  1. 概念:当 state 中的数据须要通过加工后再应用时,能够应用 getters 加工。
  2. store.js 中追加 getters 配置

    // 筹备 getters —— 用于对 state 中的数据进行加工
    const getters = {bigSum(state){return state.sum * 10}
    }
    
    // 创立并裸露 store
    export default new Vuex.Store({
        ......
        getters
    })
  3. 组件中读取数据:$store.getters.bigSum

1.4 四个 map 办法的应用

1.4.1 mapState 办法

mapState 办法: 用于帮忙咱们映射 state 中的数据为计算属性

computed: {
    // 借助 mapState 生成计算属性:sum、school、subject(对象写法)...mapState({sum:'sum',school:'school',subject:'subject'}),

    // 借助 mapState 生成计算属性:sum、school、subject(数组写法)...mapState(['sum','school','subject']),
},

1.4.2 mapGetters 办法

mapGetters 办法: 用于帮忙咱们映射 getters 中的数据为计算属性

computed: {
    // 借助 mapGetters 生成计算属性:bigSum(对象写法)...mapGetters({bigSum:'bigSum'}),

    // 借助 mapGetters 生成计算属性:bigSum(数组写法)...mapGetters(['bigSum'])
},

1.4.3 mapActions 办法

mapActions 办法: 用于帮忙咱们生成与 actions 对话的办法,即:蕴含 $store.dispatch(xxx) 的函数

methods:{
    // 靠 mapActions 生成:incrementOdd、incrementWait(对象模式)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    // 靠 mapActions 生成:incrementOdd、incrementWait(数组模式)...mapActions(['jiaOdd','jiaWait'])
}

1.4.4 mapMutations 办法

mapMutations 办法: 用于帮忙咱们生成与 mutations 对话的办法,即:蕴含 $store.commit(xxx) 的函数

methods:{
    // 靠 mapActions 生成:increment、decrement(对象模式)...mapMutations({increment:'JIA',decrement:'JIAN'}),

    // 靠 mapMutations 生成:JIA、JIAN(对象模式)...mapMutations(['JIA','JIAN']),
}

备注:mapActionsmapMutations 应用时,若须要传递参数须要:在模板中绑定事件时传递好参数,否则参数是事件对象。

1.5 模块化 + 命名空间

  1. 业务场景中须要蕴含多个 module,一个 module 是一个 store 的配置对象,与一个组件(蕴含有共享数据)对应
  2. 目标:让代码更好保护,让多种数据分类更加明确

进行模块化:

  1. 批改 store.js

    const countAbout = {
        namespaced:true,// 开启命名空间
        state: {x: 1},
        mutations: {...},
        actions: {...},
        getters: {bigSum(state){return state.sum * 10}
        }
    }
       
    const personAbout = {
        namespaced:true,// 开启命名空间
        state:{...},
        mutations: {...},
        actions: {...}
    }
       
    const store = new Vuex.Store({
        modules: {
            countAbout,
            personAbout
        }
    })
  2. 开启命名空间后,组件中读取 state 数据

    // 形式一:本人间接读取
    this.$store.state.personAbout.list
    // 形式二:借助 mapState 读取:...mapState('countAbout',['sum','school','subject']),
  3. 开启命名空间后,组件中读取 getters 数据

    // 形式一:本人间接读取
    this.$store.getters['personAbout/firstPersonName']
    // 形式二:借助 mapGetters 读取:...mapGetters('countAbout',['bigSum'])
  4. 开启命名空间后,组件中调用 dispatch

    // 形式一:本人间接 dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    // 形式二:借助 mapActions:...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  5. 开启命名空间后,组件中调用 commit

    // 形式一:本人间接 commit
    this.$store.commit('personAbout/ADD_PERSON',person)
    // 形式二:借助 mapMutations:...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
退出移动版