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

2次阅读

共计 4168 个字符，预计需要花费 11 分钟才能阅读完成。

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']),
}

备注：mapActions 与 mapMutations 应用时，若须要传递参数须要：在模板中绑定事件时传递好参数，否则参数是事件对象。

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'}),
正文完
vue.js
发表至： vue.js
2022-11-03
 0
关于vue.js:echarts修改tooltip默认样式使用formatter函数拼接加工
关于vue.js:Vue3必会技巧自定义Hooks
关于vue.js:Vue-watch源码解析
关于vue.js:vue3xtsvite2环境变量配置

站内搜索

-「」