58Vuex的介绍及使用

Vuex的介绍及使用

1.概述

在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读写)，也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时（共享）

图例

3.搭建vuex环境

3.1Vuex的安装

npm install Vuex@3

注意：如果使用的Vue2，则使用的只能是Vuex3版本之下的，而Vue3则需使用Vuex4以上的。

3.2 搭建vuex环境

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

// 配置Vuex的环境
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const actions = {};
const mutations = {};
const state = {};


export default new Vuex.Store({
    actions,
    mutations,
    state
});

// 注意： Vuex 必须先use，后再new Store
// actions 使用小写(写业务逻辑)，mutations使用大写（直接运算）

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

import store from './store'

new Vue({
    el:'#app',
    render: h => h(App),
    store
})

4基本使用

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

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const actions = {
    incrementOdd(context, val) {
        if (context.state.sum % 2) context.commit('INCREMENT', val);
    },
};
const mutations = {
    INCREMENT(state, val) {
        state.sum += val;
    },
};
const state = {
    sum: 0,
};

export default new Vuex.Store({
    actions,
    mutations,
    state
});

2. 组件中读取vuex中的数据:$store.state.sum

3. 组件中修改vuex中的数据: $stoe.dispatch('action中的方法名·,数据)或$store.commit( 'mutations中的方法名 ,数据)

备注:若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5getters的使用

1. 概念:当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在store.js 中追加getters配置

   ...
   const getters = {
       bigSum(state){
       	return state.sum *10
       }
   }
   
   export default new Vuex.Store({
   	...
       getters
   })
   
   

3. 组件中读取数据:$store.getters.bigSum

6四个map方法的使用

1. mapState方法: 用于帮助我们映射state中的数据为计算属性

computed:{
    //（对象写法)
    ...mapState({sum:'sum',subject:'subject',name:'name'}),
    //（数组写法)
    ...mapState(['sum', 'subject', 'name']),
}

2. mapGetters方法: 用于帮助我们映射getters 中的数据为计算属性

computed:{
    //（对象写法)
    ...mapGetters({bigSum:'bigSum'}),
    //（数组写法)
    ...mapGetters(['bigSum']),
}

3. mapActions方法: 用于帮助我们生成与actions对话的方法，即:包含 $store.dispatch(xxx)的函数

computed:{
    // (对象写法)
    ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'})
    // (数组写法)
    ...mapActions(['incrementOdd','incrementWait'])
}

4. mapMutations方法: 用于帮助我们生成与mutations对话的方法，即:包含 $store.commit(xxx)的函数

computed:{
    // (对象写法)
    ...mapMutations({increment:'INCREMENT', decrement:'DECREMENT'}),
    // (数组写法)
    ...mapMutations(['increment','decrement']),
}

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

7.模块化+命名空间

1. 目的: 让代码更好维护，让多种数据分类更加明确。

2. 修改store.js

const countAbout = {
    namespaced: true,	// 开启命名空间
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...}
}

const personAbout = {
    namespaced: true,	// 开启命名空间
    actions: {...},	
    mutations: {...},
    state: {...},
    getters: {...}
}


export default new Vuex.Store({
    modules: {		// 使用模块化
        countAbout,
        personAbout,
    }
});

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

//方式一:自己直接读取
	- this.$store.state.personAbout.list
//方式二:借助mapState读取;
	- ...mapState('countAbout', ['sum', 'school', 'subject'])

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

//方式一:自己直接读取
	- this.$store.getters[ 'personAbout/firstPersonName']
//方式二:借助mapGetters读取:
	- ...mapGetters('personAbout', ['firstPersonName'])

5. 开届命名空间后，组件中调用dispatch

//方式一:自己直接dispatch
	- this.$store.dispatch('personAbout/addPersonwang', person)
//方式二:借助mapActions:
	- ...mapActions ('countAbout', {incrementOdd:'jia0dd', incrementWait:'jiawait'})

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

//方式一:自己直接commit
 	- this.$store.commit('personAbout/ADD_PERSON', person)
//方式二:借助mapMutations:
	- ...mapMutations('countAbout', {increment:'IA', decrement:'JIAN'}),

- state:
	- $store.state.分类名.数据名
- getters(getters):
	- $store.getters['分类名/方法名']
- dispatch(actions):
	- $store.dispatch('分类名/方法名' [,数据])
- commit(mutations):
	- $store.commit('分类名/方法名', 数据)

8Vuex 模块化

功能块与功能块分割开，降低耦合性，功能明确，维护代价相对较低。

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import countAbout from './count';
import personAbout from './person';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        countAbout,
        personAbout
    }
});

count.js

export default {
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...}
}

person.js

export default {
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...}
}