有关毕业设计的网站,企业网站建设公司怎么做,网站开发是否用html5,外贸商城网站开发Vuex4状态管理
什么是状态管理
在开发中#xff0c;我们的应用程序需要处理各种各样的数据#xff0c;这些数据需要保存在应用程序的某一个位置#xff0c;对于这些数据的管理#xff0c;就是 状态管理目前前端项目越来越复杂#xff0c;多组件共享同一数据的状态很常见…Vuex4状态管理
什么是状态管理
在开发中我们的应用程序需要处理各种各样的数据这些数据需要保存在应用程序的某一个位置对于这些数据的管理就是 状态管理目前前端项目越来越复杂多组件共享同一数据的状态很常见因此需要一个更加方便地状态管理库
Vuex状态管理 在Vuex中组件通过读取Vuex中的State数据状态显示到页面上而组件想要修改State中的数据需要通过Dispatch提交Mutations进行修改禁止直接对State进行修改
Vuex安装和基本使用 在用脚手架搭建的过程中可以直接进行安装 同时我们也可以手动进行安装 npm install vuex 在安装完成之后在 src目录下创建store文件夹并创建index.js文件
//引入createStore函数
import { createStore } from vuex;//创建store对象
const store createStore({//会直接把对象返回出去state: () ({counter: 100,}),//等同于以下写法// state() {// return { counter: 100 };// },
});export default store;之后再 main.js文件中引入store即可
import { createApp } from vue;
import App from ./App.vue;
//引入store对象
import store from ./store;const app createApp(App);
//使用store对象
app.use(store);
app.mount(#app);在组件 template中使用
div{{$store.state.counter}}
/div在options API中使用 通常是在 computed计算属性中进行使用
computed:{counterStore(){return this.$store.state.counter}
}在composition API中使用 需要引入 useStore函数进行使用若直接定义变量进行赋值则不会是响应式 const counter store.state.counter需要进行响应式的处理
import { computed, toRef } from vue;
import { useStore } from vuex;
const store useStore();
//可以用计算属性返回
const counter computed(() {return store.state.counter;
});
//可以通过toRef转成响应式
const counterRef toRef(store.state.counter);与单纯的全局对象有什么区别
Vuex的状态存储是响应式的不能直接改变store中的状态代码上可以直接更改但是规范上不可以
单一状态树
Vuex使用的是单一状态树 用一个对象就包含了全部应用层级的状态即一个项目中只会创建一个store进行状态管理 若多个组件有不同的状态进行管理 可以进行module进行模块化管理多个组件的状态 优势 单一状态树能够让我们 最直接的方式找到某个状态的片段方便维护和调试 但是相对于pinia不够灵活
Vuex-Store的State映射到组件中 目的是取状态更为方便一点就像在组件内部定义变量一样使用 options API–mapState
在options API中我们可以使用 mapState函数进行映射传入参数 数组需要是state中存在的属性对象用于 state中的属性与组件本身的变量命名冲突 返回值 返回的就是一个函数可以直接用于computed中
//比如现在store中存在以下属性
//name: zhangcheng,
//age: 18,
//address: hebei,import { mapState } from vuex;
computed: {//传入数组参数...mapState([name, age, address]),//等同于以下写法// name() {// return this.$store.state.name// }//传入对象参数...mapState({sName: (state) state.name,}),
},composition API中将state映射到组件 前面我们知道在vuex中有一个mapState函数可以帮助我们完成映射 mapState返回的函数内部实际上用到了 this.$store.state 我们知道composition中无法使用this且this中没有$store 而在前面我们知道composition API中需要用到 useState函数
import { useStore } from vuex;
const store useStore();
//通过store.state.name获取如果想将 useState函数和mapState函数结合使用 将 mapState返回值传入到computed计算属性中computed内部接收一个函数同时改变 参数的this指向
//获取计算属性
import { computed } from vue;
//获取mapState与useStore函数
import { mapState, useStore } from vuex;//获取返回值此时的name是一个函数
const { name } mapState([name]);const store useStore();
//在传入name的时候通过bind改变this指向
//因为computed需要传入一个函数而call和apply返回值都是函数本身的返回值
//而bind返回的是一个函数
const cName computed(name.bind({ $store: store }));以上方法比较繁琐我们可以通过以下方式进行 通过解构的方法用toRefs包裹即可
import { toRefs } from vue;
import { useStore } from vuex;const store useStore();
//解构的时候对变量重命名
//注意使用toRefs
const { name: cName, age } toRefs(store.state);getter的基本使用 类似于computed计算属性对state中的数据可以进行复杂逻辑的处理 在定义store对象的时候可以配置getters选项第一个参数state接收的就是state中的变量第二个参数getters接收的就是getter中的变量返回值可以返回一个函数这样就可以让外界传值进来
//引入createStore函数
import { createStore } from vuex;//创建store对象
const store createStore({//会直接把对象返回出去state: () ({name: zhangcheng,age: 18,address: hebei,}),getters: {//第一个参数用于接收state中的变量nameAge(state) {return state.name state.age; //zhangcheng18},//第二个参数用于接收getters中的变量info(state, getters) {return getters.nameAge state.address; //zhangcheng18hebei},//可以返回一个函数用于接收变量returnInfo(state) {return function (name) {return ${name} is ${state.name} friend;};},},
});实际调用
divnameAge{{ $store.getters.nameAge }}/div
divinfo{{ $store.getters.info }}/div
divreturnInfo{{ $store.getters.returnInfo(lisi) }}/div
nameAgezhangcheng18
infozhangcheng18hebei
returnInfolisi is zhangcheng friend对于 getters中的变量也有相应的映射函数mapGetters的用法同mapState的用法一样
Mutation基本使用 是Vuex中修改State的唯一途径 在mutation中写的都是同步代码不能写异步代码比如进行网络请求 首先在创建 创建 store对象时候配置mutation选项 第一个参数 state用于访问state中的状态第二个参数 payload用于接收传入的参数
//创建store对象
const store createStore({//会直接把对象返回出去state: () ({name: zhangcheng,age: 18,address: hebei,}),mutations: {changeName(state,payload) {state.name payload;},},
});在options API中的使用
仅需在对应的methods中使用commit访问即可 commit中的第一个参数要与mutation中准备调用方法的名字保持一致
methods:{change(){this.$store.commit(changeName,lisi)}
}在compositions API中的使用
在setup中引入useStore函数调用commit方法即可
import {useStore} from vuexconst store useStore()
const changeInfo store.commit(changeInfo)actions的基本使用 Action类似于mutation但是不同的地方在于 Action提交的是mutation而不是直接变更状态 在action中并不是对State进行修改而是通过mutation进行修改 Action可以包含任何异步操作 在创建store实例的时候 mutations: {changeName(state, payload) {state.name payload;},},actions: {changeNameAction(context, payload) {//第一个参数相当于store实例但实际上不是//第二个参数是通过dispatch调用方法传入的参数context.commit(changeName, payload);},},调用 通过 dispatch函数进行调用
change() {this.$store.dispatch(changeNameAction, lisi);
},实际用法
actions中通常是进行网络请求的而mutations中是修改state的唯一途径下面是一个实际案例的做法 我们通过Vuex进行状态管理在actions中请求数据通过commit提交mutation在mutation中修改state
//创建store对象
const store createStore({//会直接把对象返回出去state: () ({list: [],}),mutations: {//修改statechangeName(state, payload) {state.list payload;},},actions: {//进行网络请求并且提交commit申请changeNameAction(context, payload) {fetch(xxxxx).then((res) {return res.json();}).then((res) {context.commit(changeName, res);});},},
});若在组件中通过 dispatch函数调用了actions中的方法也想拿到返回值 那么这个方法需要返回一个promise
actions:{changeName(){return new Promise((resolve){resolve(123)})}
}//实际调用的时候
this.$store.dispatch(changeName).then((res){console.log(res)
})module的基本使用 在使用Vuex进行状态管理的时候难免维护的状态会十分庞大 因此我们可以使用 modules将store分割成模块 每个模块都拥有自己的state、mutation、action、getter甚至可以嵌套子模块 创建一个模块
export default{state:()({}),getters:{},mutations:{},actions:{}
}在 创建 store对象的时候引入模块
import homeModule from ../home.js
import { createStore } from vuex;const store createStore({modules:{//引入模块的名字实际引入的模块home:homeModule}
})//在实际使用中mutation以及action、getters 可以直接读取
//而读取state中的数据有所变化
store.state.home.namemodule的局部状态 上面我们知道可以进行分模块的操作 那么我们想在模块中访问根模块的内容需要怎么访问 比如在 home模块中
getters:{changeCounter(state,getters,rootState){//state是本模块中的状态//getters是本模块中的getters//rootState是根模块的state}
}
//同理mutation和actions且 actions、mutations和getters中的命名不能与根组件中重复
