VueX
VueX 😃
简介
- vue开发过程中使用的状态管理工具
- 管理项目中的数据->不必通过频繁组件传参来同步某个参数的值
- 特性
- 全局状态管理
- 数据响应式
- 数据分发可以同步(mutation)或者异步(action)
- 模块化
安装
npm i vuex -s
使用
初始化store文件夹下的index
import Vue from 'vue'
import VueX from 'vuex'
// 挂载VueX
Vue.use(Vuex)
// 创建Vuex对象
const store = new Vuex.store({
state:{
// 存放的键值对就是要管理的状态
name: 'kk'
}
})
// 将store导出
export default store;
挂载到Vue实例
new Vue({
el: '#app',
router,
store, //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
组件中使用VueX
<p>{{$store.state.name}}</p>
this.$store.state.name
核心内容
VueX中包含如下成员
- state 存放状态
- mutations state 成员操作
- getters 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理
VueX工作流程
- 首先Vue使用VueX是需要向后端发送请求或者异步操作,需要dispatch VueX中actions的方法,以保证数据同步,也就是说,action就是为了让mutation中的方法可以在异步操作中起作用
- 没有异步操作,可以直接提交状态中的mutation中自己编写的方法来操作state成员不能直接操作state成员
mutations
- 操作state数据的方法的集合,可以对state内的数据进行增删改
mutations使用方法
mutations方法都有默认的形参([state][,payload])
- state是当前vuex对象中的state
- payload是该方法在被调用是传递参数使用的
// store中初始化mutation
const store = new VueX.store({
state:{
name:null
},
mutations:{
EDIT(state, name)
{
state.name = name;
}
}
})
// 组件中调用
// 方法名 参数
this.$store.commit('EDIT', 'jack')
this.$store.commit('EDIT', {age:18, name:'jack'})
增删state中的成员
在mutations的方法中进行操作
// 增加成员
Vue.set(state,"age", 15);
// 删除成员
Vue.set(state, "age");
getters
- 对state中的成员加工后传递给外界
- 有两个默认参数
- state
- getters:当前getters对象,用于将getters下的其他getter方法拿来使用
// store中初始化
getters:{
getInfo(state){
return "姓名"+state.name;
},
getFullInfo(state,getters){
return getters.getInfo + "年龄"+state.age;
}
}
// 组件中使用
this.$store.getters.getInfo;
actions
- 直接在mutations中进行异步操作会使数据失效
- actions专门进行异步,最终提交mutations方法
- 有两个默认参数
- context:上下文(相当于this)对象
- payload:挂载参数
// store中定义初始化
actions:{
aEdit(context, payload){
setTimeout(()=>{
// 进行异步的方法名 挂载参数
context.commit('edit', payload);
}, 2000)
}
}
// 组件中调用
this.$store.dispatch('aEdit', {age:10})
// 将异步操作封装为promise对象
actions:{
aEdit(context, payload){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
// 进行异步的方法名 挂载参数
context.commit('edit', payload);
}, 2000)
})
}
// 封装为promise对象后组件中使用
this.$store.dispatch('aEdit', {age:10})
.then(...)
.catch(...)
modules
- 当项目庞大时,可以采取模块化管理模式
- 将store分割成模块
- 每个模块有自己的state、mutation、action和getter
modules:{
a:{
state:{},
getters:{}
}
}
// 组件内调用模块a的状态
this.$store.state.a
// 提交和dispatch某个方法和之前用于,会自动执行所有模块内对应type的方法
this.$store.commit('edit');
this.$store.dispatch('aEdit');
模块的细节
模块中mutations和getters中的方法接受的第一个参数是自身局部模块的state
modules:{
a:{
state:{key:1},
mutations:{
edit(state){
state.key = 1;
}
},
getters:{}
}
}
getters中方法的第三个参数是根节点的state
modules:{
a:{
state:{key:1},
getters:{
getKey(state, getter, rootState)
{
return rootState.key+state.key;
}
}
}
}
actions中局部模块状态是context.state,根节点状态是context.rootState
modules:{
a:{
state:{key:1},
actions:{
aEdit(context){
if(context.state.key == context.rootState.key)
context.commit('edit');
}
}
}
}
VueX的辅助函数
- mapState
- mapMutations
- mapGetters
使用准备
使用前需要从vuex导入
import{ mapState, mapMutations, mapGetters } from 'vuex'
mapState
- 作用:拿到vuex中state的数据
- 接收
- 单个数据接收
- 多个数据接收
// 映射this.name为store.state.name
// 单个数据接收
computed:mapState({
'name'
})
// 多个数据接收
computed:{
...mapState(['name'])
}
// 组件中使用,被映射为this.name
this.name
mapMutations
- 作用:调用方法修改vuex中的属性,可以实时更新vuex
- 接收方法:可以接收多个方法
methods:{
...mapMutations({'方法名1','方法名2'})
}
// 组件中使用,被映射为this.方法名
this.func
mapGetters
- 作用:对vuex中数据操作并返回
- 接收
computed:{
...mapGetters(['getName']),
}
// 组件中使用,被映射为this.getName
this.getName