vue生态——vuex的使用

解决安装vuex后出现"export ‘inject’ was not found in 'vue’问题

更改vuex的版本  npm install [email protected]

vuex

vuex是什么？

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

什么时候使用Vuex

    1.多组件依赖同一状态
    2.来自不同组件的行为需要变更同一状态
dispatch  Actions  commit  Mutations  mutate   State  render 

1.搭建Vuex环境

创建store.js文件
    //该文件用于创建Vuex中最为核心的store

    import Vue from 'vue'
    // 引入vuex
    import vuex from '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中引入store.js文件

2.基本使用：

    1.初始化数据，配置actions 配置mutations 操作文件store.js
    import Vue from 'vue'
        // 引入vuex
        import vuex from 'vuex'
        Vue.use(vuex)
        //准备Actions--用于响应组件中的动作
        const actions = {
            
            jiaOdd:function(context,value){
                if (context.state.sum%2) {
                    console.log(context);
                    context.commit('JIA',value)
                }
            }
        }
        // 准备mutations--用于操作数据（state）
        const mutations = {
            
            JIA:function(data,value){
                data.sum += value
            }
        }
        // 准备state--用于存储数据
        
        const state = {
            sum:0
        }

        // 创建并暴露store
        export default new vuex.Store({
            actions,
            mutations,
            state
        })
    2.组件中读取vuex中的数据this.$store.$state.sum
    3.组件中修改vuex中的数据
        this.$store.dispatch('actions中的方法名',数据)
        或this.$store.commit('mutations中的方法名',数据)
        ****如果没有网络请求或其他业务逻辑组件中也可以越过actions 即不写actions  直接编写commit

3.getters的使用

    1.概念：当state中的数据需要加工后再使用，可以使用getter加工
    2.在store.js中追加getters配置
        const getters = {
            bigSum(state){
                return state.sum*10
            }
        }

        // 创建并暴露store
        export default new vuex.Store({
            actions,
            mutations,
            state,
            getters
        })    
    3.组件中读取数据  $store.getters.bigSum

4.四个map方法的使用 使用前需要引入 import {mapState} from ‘vuex’

    1.mapState方法：用于帮助我们映射state中的数据为计算属性
        computed:{
            // 映射vux中的state
            // 借助mapState生成计算属性，从state中读取数据（对象写法）
            // ...mapState({
            //     sum:'sum',
            //     school:'school',
            //     subject:'subject'
            // })
            // 数组写法
            ...mapState([
                'sum',
                'school',
                'subject'
            ]),
        }
    2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性
        computed:{ 
            ...mapGetters(['bigSum'])
        }
    3.mapActions方法：用于帮助我们生成与actions对话的方法，即包含$store.dispatch()的函数
        computed:{
            // 借助mapActions生成对应的方法，方法中调用dispatchs去联系mapActions(对象的写法)
            ...mapActions({incrementodd:'jiaOdd',incrementwait:'jiaWait'}),
            
            // ...mapActions(['jiaOdd','jiaWait'])
        }
    4.mapMutations方法：帮助我们生成与mutations对话的方法，即包含$store.commit()函数
        computed:{
            // 借助mapMutations生成对应的方法，方法中调用commit去练习mapMutations(对象的写法)
            ...mapMutations({increment:'JIA',decrement:'JIAN'}),
            
            // ...mapMutations(['JIA','JIAN']), 生成对应的方法
        }
    ***mapActions与mapMutions使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否者参数式是事件对象

5.模块化+命名空间

    1.目的：让代码更好的维护，让数据分类更加明确
    2.修改store.js
        const countOptions = {
            namespaced: true,//开启命名空间
            actions:{....},
            mutations:{...},
            getters:{...},
            state:{}
        }
        const personOptions = {
            namespaced: true,//开启命名空间
            actions:{....},
            mutations:{...},
            getters:{...},
            state:{}
        }
        export default new vuex.Store({
        modules:{
            countOptions,
            personOptions
        }
    3.开启命名空间后，组件中读取数据
        
        this.$store.state.personOptions.personList
        
        ...mapState('personOptions',['personList']),
    4.开启命名空间后，组件中读取getters数据
        
         this.$store.getters['personOptions/firstPersonName']
         
         ...mapGetters('countOptions',['bigSum'])
    5.开启命名空间后组件中调用dispatch
        
        this.$store.dispatch('personOptions/addPersonServe')
        
         ...mapActions('countOptions',{incrementodd:'jiaOdd',incrementwait:'jiaWait'}),
    6.开启命名空间后 调用commit
        
        this.$store.commit('personOptions/ADD_PERSON',personObj)
        
         ...mapMutations('countOptions',{increment:'JIA',decrement:'JIAN'}),