vue中的一个重要插件——vuex

目录

一、vuex简介

二、vuex工作原理

三、小案例

四、四个map方法的使用

1、mapState

2、mapGetters

3、mapMutations

4、mapActions

五、vuex实现数据共享案例

1、项目目录

2、源码

---

一、vuex简介：

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

何时使用：

①、多个组件依赖同一状态；

②、来自不同组件的行为需要变更同一状态；

二、vuex工作原理

三、小案例

main.js代码：

// 项目的入口文件

// 引入vue
import Vue from 'vue'
// 引入App，他是所有组件的父组件
import App from './App'
// 引入vuex
import Vuex from 'vuex'
// 引入store
import store from './store'

// 关闭vue的生产提示
Vue.config.productionTip = false
// 使用vuex
Vue.use(Vuex)

// 创建vue实例对象
new Vue({
  el:'#app',
  render: h => h(App),
  store,
})

App.vue代码：

Count.vue代码：

store/index.js代码：

// 该文件用于创建vuex中最核心的store

// 引入Vue
import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'

// 应用Vuex插件
Vue.use(Vuex)

// 准备actions————用于响应组件中的动作
const actions = {
    // 接收两个参数：第一个是mini版的store，第二个是传过来的value值
    
    // 由于没有业务逻辑，所以可以让其直接调用mutations中的commit，而不需要再通过actions
    // jia(context,value){
    //     // 调用mutations中的JIA函数
    //     console.log('actions中的jia被调用了')
    //     context.commit("JIA",value)
    // },
    // jian(context,value){
    //     // 调用mutations中的JIA函数
    //     console.log('actions中的jian被调用了')
    //     context.commit("JIAN",value)
    // },
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了')
        if(context.state.sum % 2){
            // 调用mutations中的JIA函数
            context.commit("JIA",value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jia被调用了')
        setTimeout(()=>{
        // 调用mutations中的JIA函数
            context.commit("JIA",value)
        },500)
    }
}
// 准备mutations————用于操作数据（state）
const mutations = {
    JIA(state,value){   
        console.log('mutations中的JIA被调用了')
        state.sum+=value
    },
    JIAN(state,value){   
        console.log('mutations中的JIAN被调用了')
        state.sum-=value
    }
}
// 准备state————用于存储数据
const state = {
    sum:0
}



// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

四、四个map方法的使用

1、mapState

借助mapState生成计算属性，从state中读取数据（对象写法）

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

 借助mapState生成计算属性，从state中读取数据（数组写法）

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

2、mapGetters

借助mapGetters生成计算属性，从getters中读取数据（对象写法）

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

借助mapGetters生成计算属性，从getters中读取数据（数组写法）

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

3、mapMutations

借助mapMutations生成对应的方法，方法中会调用commit去联系mutations；

（1）、对象方法

注意：

这里调用increment和decrement方法会传入一个默认的参数events，所以需要在调用它的html结构中手动传入参数n；

+
-

methods:{
        // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象方法）
        // 注意：这里调用increment和decrement方法会传入一个默认的参数events，所以需要在调用它的html结构中手动传入参数n
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),

    },

（2）、数组方法

注意：

这里需要将html结构中调用的位置都改为JIA和JIAN；

+
-

methods:{
        
        // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组方法）
        // 注意：这里使用的是JIA和JIAN，需要在html结构中改为JIA和JIAN
         ...mapMutations(['JIA','JIAN']),

    },

4、mapActions

 帮我们生成与Actions对话的方法，即：包含$store.dispatch(xxx)的函数；

借助mapActions生成对应的方法，方法中会调用commit去联系mutations；

（1）、对象方法

注意：

这里调用iincrementOdd和incrementWait方法会传入一个默认的参数events，所以需要在调用它的html结构中手动传入参数n；

    当前求和为奇数再+1
    等一等再+1

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

    },

（2）、数组方法

注意：

这里需要将html结构中调用的位置都改为jiaOdd和jiaWait；

    当前求和为奇数再+1
    等一等再+1

methods:{
        
        // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组方法）
        ...mapActions(['jiaOdd','jiaWait'])

    },

五、vuex实现数据共享案例

1、项目目录

 

2、源码：

App.vue

store/index.js

// 该文件用于创建vuex中最核心的store

// 引入Vue
import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'

// 应用Vuex插件
Vue.use(Vuex)

// 准备actions————用于响应组件中的动作
const actions = {
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了')
        if(context.state.sum % 2){
            // 调用mutations中的JIA函数
            context.commit("JIA",value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jia被调用了')
        setTimeout(()=>{
        // 调用mutations中的JIA函数
            context.commit("JIA",value)
        },500)
    }
}
// 准备mutations————用于操作数据（state）
const mutations = {
    JIA(state,value){   
        console.log('mutations中的JIA被调用了')
        state.sum+=value
    },
    JIAN(state,value){   
        console.log('mutations中的JIAN被调用了')
        state.sum-=value
    },
    ADD_PERSON(state,value){
        console.log('mutations中的ADD_PERSON被调用了')
        state.personList.unshift(value)
    }
}
// 准备state————用于存储数据
const state = {
    sum:0,
    school:'尚硅谷',
    subject:'前端',
    personList:[
        {id:'001',name:'张三'}
    ]
}
// 准备getters————用于存储加工后的数据
const getters = {
    bigSum(state){
        return state.sum*10
    }
}



// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

Count.vue

Person.vue