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

初始化数据、配置 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 应用时，若须要传递参数须要：在模板中绑定事件时传递好参数，否则参数是事件对象。

业务场景中须要蕴含多个 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 模块化 + 命名空间

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 模块化 + 命名空间

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` 办法