//vuex 官网上的核心插件
1.全局状态管理 多组件共享状态
2.任何一个组件数据发生改变,其他组件也要发生相应的变化
一.vuex 基本使用 ------------------------------>和路由一样
1.创建全局状态管理实例 (新建一个文件夹)
2.注册(在mian.js里实例里注册)
3.在组件中使用全局状态值
3.1 一种是获取,渲染全局状态值
3.2 修改全局状态值
二.安装 npm install vuex
三.使用
方式一
let store = new Vuex.Store({
state:{ //全局状态值 可以在所有组件里用this.$store.stata.name
name:'韩梅梅'
},
},
mutations:{ //修改全局状态值，必须通过mutations来做,其他不行
他需要this.$store.commit(要触发的方法名，传递的参数)触发,可以在任何地方触发
changeName(state,params){ //参数一全局状态值 参数二参数
state.name='李雷雷' //或state.name= 传来的参数
}
}
})
使用方式二
1.实例里
let store = new Vuex.Store({
state:{
age:16, //全局状态值
},
mutations:{ //修改全局状态值，必须通过mutations来做
changeAge(state,param){
state.name=params.age
}
},
actions:{ //触发修改全局状态值,
//特点：1.存放异步---------------->目的:统一管理异步请求,减少代码量
changeAction({context},params){ //2.时间旅行:每一次改变都可检测到-----vue-devtools(vue开发者工具)
//可以方网络请求
//let {commit}=context, context里面有commit方法,还有很多方法
commit('changeAge',params)
}
}
})
2.组件里
this.$store.dispatch("changeAction",要传递的参数) //这种方法,通过dispach触发action,通过commit触发mutations
//如果vue开发者工具绿了,一定是vue做的,
//vue做的,开发者工具不一定亮
/*************************************************************************************************************************/
let store = new Vuex.Store({
state:{
name:'韩梅梅' //全局状态值
},
mutations:{ //修改全局状态值，必须通过mutations来做
changeName(state,param){
state.name='李雷雷'
console.log(state,param)
}
},
getters:{ //getters相当于vue里面的computed计算属性,对数据做一些处理
double(state){ //getters里面的数据页可以直接在页面上使用
return state.name+state.name
}
},
})
/************************************************************************************************************/
辅助函数 上面那样写代码量多---------------------产生了辅助函数
//辅助函数:帮助我们减少代码量
mapState mapMutations mapGetters mapActions
mapState 在组件里
1. import {mapState} from 'vuex' mapstate将 state映射到计算属性里
2. computed:{
...mapState(['name']})
}
3.然后在组建立直接使用name
-------------------------------------------------------------------------------------------------
mapGetters mapGetters将 getters映射到计算属性里
1. import {mapGetters} from 'vuex' mapstate将 state映射到计算属性里
2. computed:{
...mapGetters(['double']})
}
3.然后在组建立直接使用double.
-------------------------------------------------------------------------------------------------
mapActions
1. import {mapActions} from 'vuex'
2. methods:{
...mapActions(['方法名']),
change(){
this.actions里面的方法名(传给actions的参数)
}
}
---------------------------------------------------------------------------------------------------
mapMutations
1.import {mapMutations} from 'vuex'
2.methods:{
...mapMUtations(['change'])
change(){
this.mutations里面的方法名(传给mutations的参数)
}
},
/***********************************************************************************************************************/
store里面的第五个配置项-----------modules(模块)
是前四个配置项的集合
const store = new Vue.Store({
modules:{
//这里是hehe模块
hehe:{
namespaced:true, //开启命名空间 防止模块出问题
state:{},
mutations:{},
actions:{}, //命名空间可以给mutations,actions,getters前面添加模块名,------>防止冲突
getters:{}
},
//这里是xixi模块
xixi:{
state:{},
mutations:{},
actions:{},
getters:{}
}
}
})
//在组里console.log(this) 这时state有hehe,xixi两个模块名
1.模块化之后,state取值需要多加一级模块名
2.其他三个配置项没变化
因此使用时:
computed:{
...mapState({
name:state=>this.state.hehe.name
})
}