兰州新区农投建设网站,南通专业做网站公司,做网站tt0546,企业网站方案设计文章目录Vuex概述安装单向数据流Vuex核心概念StatemapState 辅助函数扩展运算符GettermapGetters 辅助函数Mutation提交载荷提交载荷对象对象风格提交使用常量替代mutation事件类型Action异步分发Module命名空间Vuex
概述
Vuex 是一个状态管理库#xff0c;用于管理 Vue.js …
文章目录Vuex概述安装单向数据流Vuex核心概念StatemapState 辅助函数扩展运算符GettermapGetters 辅助函数Mutation提交载荷提交载荷对象对象风格提交使用常量替代mutation事件类型Action异步分发Module命名空间Vuex
概述
Vuex 是一个状态管理库用于管理 Vue.js 应用程序中的共享状态。它可以帮助你在应用程序中保持数据的一致性和可预测性。
Vuex包括以下几个核心概念
state存储应用程序的状态数据。getters提供一种计算派生状态的方式类似于Vue.js中的计算属性。mutations用于修改状态的方法但是只能进行同步操作。actions用于提交mutations可以进行异步操作。modules将store拆分为模块每个模块都有自己的state、getters、mutations和actions。
Vuex 官方文档
安装
npm install vuexnext --save单向数据流
script
export default {data() {return {count: 0}},methods: {increment() {this.count;}}
}
/scripttemplatebutton clickcount{{ count }}/button
/template这是一个单向数据流
状态驱动应用的数据源。视图以声明方式将状态映射到视图。操作响应在视图上的操作导致的状态变化。
但是当我们的应用遇到多个组件共享状态时单向数据流的简洁性很容易被破坏
多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。
Vuex 可以帮助我们管理共享状态并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是如果您需要构建一个中大型单页应用您很可能会考虑如何更好地在组件外部管理状态Vuex 将会成为自然而然的选择。
Vuex核心概念 每一个 Vuex 应用的核心就是 store仓库。“store”基本上就是一个容器它包含着你的应用中大部分的状态 (state)。
Vuex 和单纯的全局对象有以下两点不同
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候若 store 中的状态发生变化那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
State
用于存储应用程序的状态数据。
在Vue组件中通过 this.$store 访问store实例。通过$store.state获取状态对象。Vuex 的状态存储是响应式的。
支持Vuex
import store from ./store;const app createApp(App);
// 将 store 实例作为插件安装
app.use(store);
app.mount(#app);定义store对象
import { createStore } from vuex;const store createStore({state() {return {count: 0,};}
});
export default store;使用store
templatepcount: {{ $store.state.count }}/p!-- 不推荐 --button click$store.state.count修改count/button
/templatemapState 辅助函数
使用mapState辅助函数可以简化代码如将{{ $store.state.count }}简化为{{ count }}。
script
import { mapState } from vuexexport default {//mapState传对象computed: mapState({//简化代码//方式一使用箭头函数// count: state state.count,//方式二字符串参数等价于state state.countcount: count})
}
/scripttemplatepcount: {{ $store.state.count }}/pp{{ count }}/pbutton click$store.state.count修改count/button
/template当映射的计算属性的名称与 state 的子节点名称相同时也可以给 mapState 传一个字符串数组
script
import { mapState } from vuexexport default {//mapState传数组computed: mapState([count, msg])
}
/scripttemplatepcount: {{ $store.state.count }}/pp{{ count }}/pp{{ msg }}/pbutton click$store.state.count修改count/button
/template扩展运算符
computed属性在Vue组件中只能有一个可以使用对象扩展运算符兼容局部计算属性。
script
import { mapState } from vuexexport default {data() {return {num: 10}//对象扩展运算符computed: {addNum() {return this.num 5;},...mapState([count, msg])}
}
/scripttemplatepcount: {{ $store.state.count }}/pp{{ count }}/pp{{ msg }}/pp{{ addNum }}/pbutton click$store.state.count修改count/button
/template
Getter
提供一种计算派生状态的方式类似于Vue.js中的计算属性例如对列表进行过滤并计数。
从 Vue 3.0 开始getter的结果不再像计算属性一样会被缓存起来。
定义store对象
import { createStore } from vuex;const store createStore({state() {return {msg: hello world,};},getters: {reverseMsg(state) {return state.msg.split().reverse().join();},reverseMsgLength(state, getters) {return getters.reverseMsg.length;},}
});
export default store;在Vue中使用
templatep{{ $store.getters.reverseMsg }}/pp{{ $store.getters.reverseMsgLength }}/p
/templatemapGetters 辅助函数
可以通过mapGetters辅助函数将getter映射到计算属性中。
script
import { mapState, mapGetters } from vuexexport default {data() {return {num: 10}},computed: {addNum() {return this.num 5;},...mapState([count, msg]),...mapGetters([reverseMsg, reverseMsgLength])}
}
/scripttemplatep{{ $store.getters.reverseMsg }}/pp{{ $store.getters.reverseMsgLength }}/pp{{ reverseMsg }}/pp{{ reverseMsgLength }}/p
/templateMutation
用于修改状态的方法但是只能进行同步操作。
使用$store.commit()方法触发mutation函数。
定义store对象
import { createStore } from vuex;const store createStore({state() {return {count: 0};},mutations: {//修改状态的方法increment(state) { state.count;},},
});
export default store;在Vue中使用
script
export default {methods: {increment() {//使用$store.commit触发方法this.$store.commit(increment);}}
}
/scripttemplatepcount: {{ $store.state.count }}/pbutton clickincrement修改count/button
/template提交载荷
你可以向 store.commit 传入额外的参数即 mutation 的载荷payload。
在store对象中定义
mutations: {add(state, num) {state.count num;},
},使用
script
export default {data() {return {num: 10}},methods: {add() {this.$store.commit(add, 5);}}
/scripttemplatepcount: {{ $store.state.count }}/p button clickadd修改num/button
/template提交载荷对象
在store对象中定义
mutations: {add2(state, payload) {state.count payload.num;},
}使用
script
export default {methods: {add2() {this.$store.commit(add2, { num: 10 });}}
}
/scripttemplatepcount: {{ $store.state.count }}/pbutton clickadd2修改num/button
/template对象风格提交
this.$store.commit({type: add,num: 20
})使用常量替代mutation事件类型
定义mutation-type.js文件
export const ADD add;在store对象中使用
import { createStore } from vuex;
import { ADD } from ../mutation-type;const store createStore({state() {return {count: 0};},mutations: {[ADD](state, num) {state.count num;}},
});
export default store;Action
用于提交mutations可以进行异步操作。
使用$store.dispatch()方法触发actions中定义的函数。
在store对象中定义
import { createStore } from vuex;const store createStore({state() {return {count: 0};},mutations: {increment(state) {state.count;}},actions: {increment(context) {context.commit(increment);},},
});
export default store;在Vue中使用
script
export default {methods: {increment2() {this.$store.dispatch(increment);}}
}
/scripttemplatepcount: {{ $store.state.count }}/pbutton clickincrement2修改num(actions)/button
/template**使用参数解构简化代码 **
actions: {increment({ commit }) {commit(increment);},
},异步分发
在store对象中定义
import { createStore } from vuex;const store createStore({state() {return {count: 0,};},mutations: {increment(state) {state.count;}},actions: {incrementAsync({ commit }) {setTimeout(() {commit(increment);}, 1000);},},
});
export default store;在Vue中使用
script
export default {methods: {incrementAsync() {this.$store.dispatch(incrementAsync)}}
}
/scripttemplatepcount: {{ $store.state.count }}/pbutton clickincrementAsync修改num(异步)/button
/templateModule
将store拆分为模块每个模块都有自己的state、getters、mutations和actions。
新建user模块
const user {state() {return {userName: xiaoming,};},getters: {userNameAge(state, getters, rootState) {return state.userName 18岁;},},mutations: {updateUserName(state) {state.userName 小明;},},
};
export default user;添加子模块
import { createStore } from vuex;
import user from ./user;const store createStore({modules: {user,},
});
export default store;访问user模块
script
export default {methods: {changeUserName() {console.log(this.$store);this.$store.commit(updateUserName);}}
}
/scripttemplatep{{ $store.state.user.userName }}/pbutton clickchangeUserName修改userName/buttonp{{ $store.getters.userNameAge }}/p
/template命名空间
如果希望你的模块具有更高的封装度和复用性你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
新建Student的store对象
const student {namespaced: true, //开启命名空间state() {return {userName: xiaohei,};},getters: {userNameAge(state, getters, rootState) {return state.userName 8岁;},},mutations: {updateStudentName(state) {state.userName 小黑;},},
};
export default student;在Vue3中使用
script
export default {methods: {changeStudentName() {this.$store.commit(student/updateStudentName);}}
/scripttemplateh2student模块/h2p{{ $store.state.student.userName }}/pbutton clickchangeStudentName修改studentName/buttonp{{ $store.getters[student/userNameAge] }}/p
/template
