Vuex基础使用与模块化

Vuex

概念

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

使用时机

多个组件需要共享数据时

搭建vuex环境

1.创建文件：/src/store/index.js：
// 该文件用于配置VueX中最为核心的store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions = {}

// 准备mutations——用于操作数据（state）
const mutations = {}

// 准备state——用于操作数据（state）
const state = {}

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

2.在main.js中创建vm时传入store配置项
.....
import store from './store/index.js'
.....
new Vue=({
    el:".app",
    render: h => {App},
    store
})

基本使用

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions = {
    'add'(context,value) {
        context.commit('ADD',value);
    },
}

// 准备mutations——用于操作数据（state）
const mutations = {
    ADD(state,value) {
        state.sum += value;
    },
}

// 准备state——用于操作数据（state）
const state = {
    sum:0, // 当前的和
}

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

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

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

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

getters

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

2.在store.js中追加getters配置
.....
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
export default new Vuex.Store({
    .....
    getters:getters
})

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

四个map方法的使用

1.mapState方法: 用于帮助我们映射state中的数据为计算属性
cpmputed: {
    // 借助mapState生成计算属性，从state中读取数据。(对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'})

    // 借助mapState生成计算属性，从state中读取数据。(数组写法)
    ...mapState(['sum','school','subject'])
}

2.mapGetters方法: 用于帮助我们映射getters中的数据为计算属性
cpmputed: {
    // 借助mapGetters生成计算属性，从state中读取数据。(对象写法)
    ...mapGetters({bigSum:'bigSum'})

    // 借助mapGetters生成计算属性，从state中读取数据。(数组写法)
    ...mapGetters(['bigSum'])
}

3.mapActionss方法:用于帮助我们生成与actions对话的方法，即: 包含$store.dispatch(xxx)函数
methods: {
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组的写法)
    ...mapActions({addOdd:'addOdd',waitAdd:'waitadd'}),
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象的写法)
    ...mapMutations(['addOdd','waitadd'])
}

4.mapMutations方法: 用于帮助我们生成与mutaions对话的方法，即: 包含$store.commit(xxx)函数
methods: {
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象的写法)
    ...mapActions(['ADD','DIFF']),
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组的写法)
    ...mapMutations({add:'ADD',diff:'DIFF'})
}

模块化和命名空间

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

2.修改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
    }
})

3.开启命名空间后，组件中读取state数据:
// 方式一 自己直接读取
this.$store.state.PersonAbout.list
// 方式二 借助mapState读取:
...mapState('PersonAbout',['list',...])

4.开启命名空间后，组件中读取getters数据:
// 方式一 自己直接读取
this.$store.getters[PersonAbout/firstPersonName]
// 方式二 借助mapGetters读取:
...mapState('PersonAbout',['firstPersonName',...])

5.开启命名空间后，组件中调用dispatch:
// 方式一 自己直接使用dispatch
this.$store.dispatch('PersonAbout/addPersonWang',person)
// 方式二 借助mapActions:
...mapActions('PersonAbout',{id:this.id,name:this.name})

6.开启命名空间后，组件中调用commit:
// 方式一 自己直接使用commit
this.$store.commit('PersonAbout/addPersonWang',person)
// 方式二 借助mapMutations:
...mapMutations('PersonAbout',{id:this.id,name:this.name})