安徽省驻房城乡建设官方网站,网页版抖音入口官网,陕西有限公司网站建设招标公告,wordpress 云服务器配置文章目录全局状态管理模式Vuexvuex是什么#xff1f;什么是“状态管理模式”#xff1f;vuex的应用场景Vuex安装开始核心概念一、State1、单一状态树2、在 Vue 组件中获得 Vuex 状态3、mapState辅助函数二、Getter三、Mutation1、提交载荷#xff08;Payload#xff09;2、…
文章目录全局状态管理模式Vuexvuex是什么什么是“状态管理模式”vuex的应用场景Vuex安装开始核心概念一、State1、单一状态树2、在 Vue 组件中获得 Vuex 状态3、mapState辅助函数二、Getter三、Mutation1、提交载荷Payload2、对象风格的提交方式3、使用常量代替Mutation事件类型4、Mutation必须是同步函数5、在组件中提交Mutation四、Action全局状态管理模式Vuex Tips由于需要使用到全局变量vue3做全局状态管理和它搭配最好的是Pinia但是菠萝是和组合式API搭配一起使用更好一些。和Pinia功能一模一样的是Vuex插件这个插件公司相对使用得较多。
vue3对应的是vuex4版本vue2对应的是vuex3版本vue3的官网是找不到vuex在vue2的官网https://vuex.vuejs.org/zh/
vuex是什么
Vuex是专门为Vue设计的状态管理模式库。我们通常称之为全局状态管理模式它能管理所有组件的状态。状态在vue里面可以理解为响应式数据
什么是“状态管理模式”
状态管理自管理应用包含三部分
状态驱动应用的数据源视图以声明方式将状态映射到视图操作响应式的在视图上的用户输入导致的状态变化
当我们的应用遇到多个组件共享状态数据时单项数据流的简洁性很容易被破坏。意思是说vue是单项数据流数据只能从父的去改变子的子的是不能操作父的。
vuex的应用场景
多个视图组件依赖于同一个状态数据来自不同视图组件的行为需要变更同一状态数据指的是多个组件需要更改同一个数据
问题一传参的方法对于多层嵌套的组件将会非常繁琐并且对于兄弟组件间的状态传递无能为力。 问题二我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱通常会导致无法维护的代码。 因此我们把组件的共享状态抽取出来以一个全局单例模式管理
Vuex安装
项目安装命令npm init vuelatest依赖安装npm iVuex安装npm install vuexnext --save
开始
可以创建一个store文件夹存放index.js文件
// 从vuex里面解构createStore方法
import { createStore } from vuex;
// 创建仓库实例
const store createStore()
// 暴露实例
export default store;从入口文件main.js引入仓库实例 这里注意如果路径默认以文件夹结尾例如这里的./store相当于./store/index.js
import { createApp } from vue;
import App from ./App.vue;// 引入仓库实例
import store from ./store;createApp(App).use(store).mount(#app);仓库的state就是全局的数据相当于组件的data语法是data一样是函数返回对象
// 要创建仓库实例
import { createStore } from vuex;const store createStore({// 仓库的state就是全局的数据相当于组件的datastate() {return {count: 10,};},
});export default store;在跟组件里面引入两个子组件
templateh2vuex-demo/h2Child1 /hr /Child2 /
/templatescript
import Child1 from ./components/Child1.vue;
import Child2 from ./components/Child2.vue;export default {components: {Child1,Child2,},
};
/script通过this.store在子组件中拿到仓库的数据这里的this.store在子组件中拿到仓库的数据这里的this.store在子组件中拿到仓库的数据这里的this.store是仓库实例是个对象类似于this.$route
可以通过this.$store.state.xxx来获取仓库数据计算属性会根据已有的值去计算一个新的结果并且已有的值可以作为计算属性的依赖
export default {mounted() {return this.$store.state.count;},computed: {count() {return this.$store.state.count;},},
}仓库数据不能使用data来接收会导致响应式失效 // 仓库数据不能使用data来接受会导致响应式失效data() {return {count: this.$store.state.count,};},
直接修改是不符合规范的 methods: {fn() {// 直接修改是不符合规范this.$store.state.count;},},mutations是唯一可以改变state的地方里面放函数子组件可以通过commit方法去调用这个函数改变仓库数据
mutations: {increment(state) {state.count;},}methods: {fn() {this.$store.commit(increment);},}核心概念
一、State
1、单一状态树
一个项目里面只有一个仓库只有一个state。单一状态树和模块化并不冲突项目会分模块意味着会有多个state
2、在 Vue 组件中获得 Vuex 状态
由于 Vuex 的状态存储是响应式的从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
3、mapState辅助函数
Tips当一个组件需要获取多个状态的时候将这些状态都声明为计算属性会有些重复和冗余。可以使用 mapState 辅助函数帮助我们生成计算属性较少代码量
mapState数组写法 当映射的计算属性的名称与 state 的子节点名称相同时我们也可以给 mapState 传一个字符串数组。
// 重复和冗余
// computed: {// count() {// return this.$store.state.count;// },// name() {// return this.$store.state.name;// },// sex() {// return this.$store.state.sex;// },// likes() {// return this.$store.state.likes;// },// },// mapState的数组写法computed: mapState([count, name, sex, likes]),mapState对象写法 可以重命名可以写函数改造数据 computed: mapState({// 重命名num: count,// 函数写法用于做数据的改造name: (state) 亲爱的 state.name,sex: (state) {return state.sex 1 ? 男 : 女;},// 如果需要用到this要把箭头函数转成普通函数likes(state) {return state.likes.concat(this.like);},}),
由于组件自身就可以写computed属性但是组件里面的选项是不能重复的如果我们写两个computed那么后面的对象肯定会覆盖前面的。 解决方法使用扩展运算符或者Object.assign() 浅拷贝合并对象 computed: {...mapState({// 重命名num: count,// 函数写法用于做数据的改造name: (state) 亲爱的 state.name,sex: (state) {return state.sex 1 ? 男 : 女;},// 如果需要用到this要把箭头函数转成普通函数likes(state) {return state.likes.concat(this.like);},}),doubleNum() {return this.num2 * 2;},},二、Getter
场景如果我们的各自组件都需要封装一个相同的函数例如计算属性里面封装一个时间戳函数我们需要在其他组件中复用这个函数这样重复的代码就很多这是我们希望将函数写在仓库里给其他组件使用。
getters相当于仓库的计算属性state这个参数就是为了拿到state(){}里面的数据getters这个参数表示一个getters不仅可以依赖仓库的数据还可以依赖另一个getters。一般用不上getters传参mapGetters 辅助函数mapGetters仅仅是将 store 中的 getter 映射到局部计算属性
// getters相当于是仓库的计算属性getters: {timeStr(state, getters) {const date new Date(state.time);const Y date.getFullYear() -;const M (date.getMonth() 1 10? 0 (date.getMonth() 1): date.getMonth() 1) -;const D (date.getDate() 10 ? 0 date.getDate() : date.getDate()) ;const h (date.getHours() 10 ? 0 date.getHours() : date.getHours()) :;const m (date.getMinutes() 10 ? 0 date.getMinutes() : date.getMinutes()) :;const s date.getSeconds() 10 ? 0 date.getSeconds() : date.getSeconds();return Y M D h m s;},timeStr2(state, getters) {return getters.timeStr !!!;},count2: (state) (n) state.count * n,
});三、Mutation
mutation是唯一可以改变state的方法。mutation里面是放函数通过this.store.commit方法去触发mutation里面的函数。
1、提交载荷Payload
可以接受第二个参数payload(载荷),表示参数一般情况下payload建议写成对象的形式 对象可以传多个值方便维护
syncAgeAdd(state, payload) {state.age payload.n;},2、对象风格的提交方式
add(n) {// 如何去触发仓库的mutations的函数this.$store.commit(increment2, { num: n });// 等价于下面的对象风格的提交方式this.$store.commit({// type: increment2,type: INCREMENT2,num: n,});},3、使用常量代替Mutation事件类型
使用常量将字符串存起来使用
export const INCREMENT2 increment2;4、Mutation必须是同步函数
每一次调用mutation的函数的时候在开发工具里面都会产生一条记录就是快照产生快照的时间是mutation函数调用的时间而不是数据改变的时间。会让开发工具里面快照的值有错误例如下面使用定时器异步代码
addage(state) {setTimeout(() {state.age;}, 2000);
},5、在组件中提交Mutation
mapMutations辅助函数是使用在methods里面下面代码将仓库的addage函数映射到了组件的methods里面变成了methods里面有addage函数
methods: {
ageadd() {// this.$store.commit(addage);this.addage();},// 将仓库的addage函数映射到了组件的methods里面// 变成了methods里面有addage函数...mapMutations([addage, INCREMENT2]),}四、Action
action类似于mutation不同的在于
Action 提交的是 mutation而不是直接变更状态。Action 可以包含任意异步操作。通过dispatch的方法来调用仓库的actions的函数actions是不能直接修改state的只能通过调用mutations的函数
templateh3actions/h3divage: {{ age }} - button clickfnasync age/button/div
/templatescript
import { mapState, mapActions } from vuex;export default {computed: mapState([age]),methods: {fn() {// 通过dispatch的方法来调用仓库的actions的函数// this.$store.dispatch(asyncAgeAdd, { n: 4 });this.asyncAgeAdd({ n: 4 });},...mapActions([asyncAgeAdd]),},
};
/script
