vue-day11Vuex 1.概念在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享

Vuex(vue2中要使用vuex的3版本；vue3中要使用vuex的4版本)

1.概念

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

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

创建文件：src/store/index.js

// 该文件用于创建vuex中最为核心的store
//引入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
})

4.基本使用

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

5.getters的使用

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

在store.js中追加getters配置

......
// 准备getters——用于将state中的数据进行加工
const getters = {
    // 收到的参数就是state，靠返回值return来决定值
	bigSum(state){
         return state.sum * 10
	}
}

//创建并暴露store，配置getters
export default new Vuex.Store({
	......
	getters
})

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

6.四个map方法的使用

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

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

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

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

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

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

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

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

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

7.模块化+命名空间

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

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

// export defaul new Vuex.store({}).....

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

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
// 从countAbout组件中取[]里面的属性
...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
// personAbout/ADD_PERSON：'/'前面是分类名，后面是mutations名
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

vuex的工作流程：

上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改.

补充：

// mapState、mapGetters方法
<template>
    <div>
        <h1>当前求和为：{{sum}}</h1>
        <h3>当前求和放大10倍为：{{bigSum}}</h3>
        <h3>我在{{school}}，学习{{subject}}</h3>
    </div>
</template>

<script>
    // 引入
    import {mapState,mapGetters} from 'vuex'
    export default {
        name:'Count',
        computed:{
//            靠程序员自己亲自去写计算属性
//            sum(){
    //            return this.$store.state.sum
//            },
//            school(){
//                return this.$store.state.school
//            },
//            subject(){
//                return this.$store.state.subject
//           }, 
//            bigSum(){
//                return this.$store.getters.bigSum
//            },

            //借助mapState生成计算属性，从state中读取数据。（对象写法）
            ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

            //借助mapState生成计算属性，从state中读取数据。（数组写法）
            // 数组写法：key值得和state中的数据名称相同
            ...mapState(['sum','school','subject']),

            //借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
            ...mapGetters({bigSum:'bigSum'}),

            //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
            ...mapGetters(['bigSum'])
        },
    }
</script>

// 在组件中
// mapActions、mapMutations方法
<template>
    <div>
        <!-- 传参(n),不传参的话，那么就是event ->
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        name:'Count',
        methods: {
//            //程序员亲自写方法
//            increment(){
//                    this.$store.commit('JIA',this.n)
//            },
//            decrement(){
//                    this.$store.commit('JIAN',this.n)
//            }, 

            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
            ...mapMutations({increment:'JIA',decrement:'JIAN'}),

            // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
            ...mapMutations(['JIA','JIAN']),

//            //程序员亲自写方法
//             incrementOdd(){
//                    this.$store.dispatch('jiaOdd',this.n)
//            },
//            incrementWait(){
//                    this.$store.dispatch('jiaWait',this.n)
//            }, 

            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
            ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

            // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
            ...mapActions(['jiaOdd','jiaWait'])
        }
    }
</script>

// vuex的模块化编码
在Vuex中，模块化编程是指将应用的状态分割成多个模块，每个模块拥有自己的状态、mutations、actions和
getters。这样做的好处是可以更好地组织代码，提高代码的可维护性和可扩展性。