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

1.1 了解 `Vuex`

1.1.1 `Vuex` 是什么

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

1.1.2 什么时候应用 `Vuex`

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

1.1.3 `Vuex` 工作原理图

1.2 搭建 `Vuex` 环境与根本应用

1.2.1 环境 `Vuex` 搭建

创立文件：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
})

在 main.js 中创立 vm 时传入 store 配置项

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

1.2.2 根本应用

初始化数据、配置 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,
})

组件中读取 Vuex 中的数据：$store.state.sum
组件中批改 Vuex 中的数据：$store.dispatch('action中的办法名',数据) 或 $store.commit('mutations中的办法名',数据)

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

1.3 `Vuex` 外围概念和API

1.3.1 `state`

Vuex 治理的状态对象
它应该是惟一的
示例代码：
```
const state = {
    sum:0
}
```

1.3.2 `actions`

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

在组件中应用：$store.dispatch('对应的action回调名') 触发
能够蕴含异步代码（定时器,ajax等等）

示例代码：

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

1.3.3 `mutations`

值是一个对象，蕴含多个间接更新 state 的办法
谁能调用 mutations 中的办法？如何调用？

在 action 中应用： commit('对应的mutations办法名') 触发
mutations 中办法的特点：不能写异步代码、只能单纯的操作 state

示例代码：

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

1.3.4 `getters`

概念：当 state 中的数据须要通过加工后再应用时，能够应用 getters 加工。

在 store.js 中追加 getters 配置

// 筹备 getters —— 用于对 state 中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

// 创立并裸露store
export default new Vuex.Store({
    ......
    getters
})

组件中读取数据：$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 模块化+命名空间

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

进行模块化：

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

开启命名空间后，组件中读取 state 数据

//形式一：本人间接读取
this.$store.state.personAbout.list
//形式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取 getters 数据

//形式一：本人间接读取
this.$store.getters['personAbout/firstPersonName']
//形式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用 dispatch

//形式一：本人间接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//形式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用 commit

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

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

1.1 了解 `Vuex`

1.1.1 `Vuex` 是什么

1.1.2 什么时候应用 `Vuex`

1.1.3 `Vuex` 工作原理图

1.2 搭建 `Vuex` 环境与根本应用

1.2.1 环境 `Vuex` 搭建

1.2.2 根本应用

1.3 `Vuex` 外围概念和API

1.3.1 `state`

1.3.2 `actions`

1.3.3 `mutations`

1.3.4 `getters`

1.4 四个 `map` 办法的应用

1.4.1 `mapState` 办法

1.4.2 `mapGetters` 办法

1.4.3 `mapActions` 办法

1.4.4 `mapMutations` 办法

1.5 模块化+命名空间

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

1.1 了解 Vuex

1.1.1 Vuex 是什么

1.1.2 什么时候应用 Vuex

1.1.3 Vuex 工作原理图

1.2 搭建 Vuex 环境与根本应用

1.2.1 环境 Vuex 搭建

1.2.2 根本应用

1.3 Vuex 外围概念和API

1.3.1 state

1.3.2 actions

1.3.3 mutations

1.3.4 getters

1.4 四个 map 办法的应用

1.4.1 mapState 办法

1.4.2 mapGetters 办法

1.4.3 mapActions 办法

1.4.4 mapMutations 办法

1.5 模块化+命名空间

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

1.1 了解 `Vuex`

1.1.1 `Vuex` 是什么

1.1.2 什么时候应用 `Vuex`

1.1.3 `Vuex` 工作原理图

1.2 搭建 `Vuex` 环境与根本应用

1.2.1 环境 `Vuex` 搭建

1.3 `Vuex` 外围概念和API

1.3.1 `state`

1.3.2 `actions`

1.3.3 `mutations`

1.3.4 `getters`

1.4 四个 `map` 办法的应用

1.4.1 `mapState` 办法

1.4.2 `mapGetters` 办法

1.4.3 `mapActions` 办法

1.4.4 `mapMutations` 办法

发表回复取消回复