vue中的vuex的使用

2023-12-01 19:40:10

Vuex

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)

//准备action--用于响应组件中的动作
const actions = {}
//准备mutations--用于操作数据(state)
const mutations =  {}
//准备state--用于储存数据
const state = {}

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

在main.js中创建时传入store配置项

//引入store
import store from './store/index'

new Vue({
    el:"#app",
    render:h=>h(App),
    store,
    beforeCreate(){
        //设置全局事件总线(要让this.$bus可以调用$emit和$on)
        Vue.prototype.$bus = this
    }
})

4.基本使用

初始化数据,配置action,配置mutation,操作文件store.js

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

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备action--用于响应组件中的动作
const actions = {
     jia(context,value){
         context.commit('JIA',value)
     },
    
}
//准备mutations--用于操作数据(state)
const mutations =  {
    JIA(state,value){
        state.sum+=value
    }
}
//准备state--用于储存数据
const state = {
    sum:0//当前的和
}

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

组件中读取vuex中的数据:$store.state.sum,在模板中{{}}可以不写this,因为{{}}可以读取到vm中的所有东西
组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)或$store.commit('mutation中的方法名',数据)

5.getters的使用

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

再store.js中追加getters配置

......

//准备getters-用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*100
    }
}

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

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

6.四个map方法的使用

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

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

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

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

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

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

methods:{
	//靠mapActions生成,incrementOdd,incrementWait(对象形式)
	...mapActions({incrementOdd:'jia',incrementWait:'jiawait'})
	//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法)
    ...mapActions(["add3", "jiaWait"]),
	
}

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

methods:{
	//借助mapMutations生成对应的方法,方法中会调用commit方法去联系mutations(对象的写法)
    // ...mapMutations({add1:'JIA',add2:'JIAN'}),
    //借助mapMutations生成对应的方法,方法中会调用commit方法去联系mutations(数组的写法)
    ...mapMutations(["JIA", "JIAN"]),
}

备注:mapActions与mapMutations使用的时候,若需要传递参数,在模板中绑定事件时传递好参数,否则参数是事件对象(event)

7.模块化+命名空间

目的: 让代码更好维护,让多种数据分类更加明确
修改store.js

const countAbout={
    namespaced:true,//开启命名空间
    state:{x:1},
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
    ......
}
const personAbout={
    namespaced:true,//开启命名空间
    ......
}
//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

开启命名空间之后,组件中读取state数据

//方式一:自己读取数据
this.$store.state.personAbout.list
//方式二:借助mapState读取,
...mapState('countAbout',['x']),

开启命名空间之后,组件中读取getters数据

//方式一:自己读取数据
this.$store.getters['personAbout/first']
//方式二:借助mapGetters读取,
...mapGetters('countAbout',['bigSum']),

开启命名空间之后,组件中读取dispatch

//方式一:自己直接dispatch
this.$store.dispatch['personAbout/add',参数]
//方式二:借助mapActions
...mapActions('countAbout',['add']),//这里想要传参的话,要在调用这个函数的时候

开启命名空间之后,组件中调用commit

//方式一:自己直接commit
this.$store.commit('personAbout/Add_person',参数)
//方式二:
...mapCommit('personAbout',[Add_person])

码农公寓