vuex的使用

9.1、理解vuex

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

2. Github地址: https://github.com/vuejs/vuex-

什么时候使用Vuex-

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

9.2、getters的使用

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

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

…………
const getters = {
    bigSum(state) {
    return state.sum * 10
    }
}
​
//创建并暴露store
export default new Vuex.Store({
    ……
    getters
})

9.3、四个map的使用

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

computed: {
    //借助mapState生成计算属性: sum、 school、subject（对象写法)
    ...hapState({sum : 'sum ' ,school : 'school' ,subject : 'subject'}),
    
    /借助mapState生成计算属性: sum、school、subject（数组写法)
    ...mapState([ 'sum ' , 'school ' , 'subject' ])，
},

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

computed: {
    /借助mapGetters生成计算属性: bigSum（对象写法)
    ...mapGetters({bigSum: ' bigSum'}),
    
    /借助mapGetters生成计算属性: bigSum(数组写法)
    ...mapGetters( [ 'bigsum ' ])
},

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

methods:{
    //靠mapActions生成: incrementodd、 incremehtwait（对象形式)
    . ..mapActions({incrementOdd : 'jiaodd ' ,incrementwait : 'jiawait ' })
    //靠mapActions生成: incrementOdd、incrementwait（数组形式)
    ...mapActions([ 'jia0dd ' , 'jiawait'])
}

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

methods : {
    //靠mapActions生成: increment、decrement(对象形式)
    ...mapMutations({increment : ' JIA' ,decrement : ' JIAN ' })，
   //靠mapMutations生成:3IA、JIAN（对象形式)
    ...mapMutations([ "IA' , 'JIAN " ]),
}

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

9.4、模块化 + 命名空间

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

2.修改store.js

const countAbout = {
    namespaced:true,ll开启命名空间
    state:{x:1},
    mutations: { ... },actions: { ... },
    getters: {
        bigSum(state){
            return state.sum* 10
        }
    }
}
const personAbout = {
    namespaced:true,l l开启命名空间
    state:{ ... },
    mutations: i ... },
    actions: i ... }
}
const store = 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 ( ' countAbout' ,[ 'bigSum '])

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: ' JIA' ,decrement: ' JIAN '}),