1.前言
vuex作为vue中最流行的状态管理工具,在vue3版本使用的时候也是有些注意事项的 总结如下
2. store
只是讲解和
v2不同的地方,store文件v3一样这里这个
store就不拆分了,看起来费劲
import { createStore } from 'vuex' export default createStore({ state: { num: 1, carList: [ { carName: "毛豆Y", price: 27, range: 568 }, { carName: "极氪001", price: 28, range: 620 }, { carName: "零跑C11", price: 19, range: 520 }, { carName: "比亚迪汉", price: 23, range: 610 } ], userInfo: {} }, getters: { doubleNum(state) { return Math.pow(state.num, 2) }, userVipList(state) { return state.carList.filter(v => v.range > 600) } }, mutations: { increase(state, { payload = 10 }) { state.num += payload }, setCarList(state, { payload }) { return state.carList = payload }, delList(state, index) { state.carList.splice(index, 1); }, updateUserInfo(state, obj) { state.userInfo = obj console.log("存储成功",state) }, }, actions: { getActionList(context) { // 模拟异步请求 setTimeout(() => { context.commit("setCarList", { payload: [{ carName: "极氪001", price: 28, range: 620 },] }) }, 1000) }, delCarList(context,index) { setTimeout(() => { //触发mutations中的方法 变更状态 context.commit("delList", index); }, 1000) } }, modules: { } })
3.不使用辅助函数
3.1.1 直接访问 store state
直接使用 和
v2用法一样
<h1>vuex数据-state:{{$store.state.num}}</h1> <ul> <li v-for="item in $store.state.carList" :key="item">{{item.carName}}</li> </ul>
3.1.2 计算属性 同名
computed:mapState(["num"]),
这种写法 就只能使用
num的名字
3.1.3 计算属性 computed 别名-1
computed:{ num(){ return this.$store.state.num } },
这种方式 新的计算属性的名字也可以 换个名字不叫
num
3.1.4 计算属性 computed 别名-2
computed:mapState({ otherNum:state=>state.num, }),
3.1.5 计算属性 computed 别名-3
computed:mapState({ n:"num" }),
3.2 访问 store getter
<h1>vuex-getters:{{$store.getters.doubleNum}}</h1>
3.3 mutation
<h1>vuex数据修改-mutation: <button @click="add">增加</button></h1>
<script setup> import {useStore} from 'vuex' let store = useStore() let add = ()=>{ store.commit("increase",{payload:100}) } </script>
直接使用了
setup
3.4 action
<h1>vuex数据修改-action: <button @click="changeCar">修改</button></h1>
let changeCar = ()=>{ store.dispatch("getActionList") }
4. 辅助函数
4.1 直接上 模板
<template> <div> <h1>vuex-辅助函数</h1> <h1>vuex数据-state:{{ num }}</h1> <h1>vuex数据修改-mutation: <button @click="add">增加</button></h1> <h1>vuex数据修改-action: <button @click="changeCar">修改</button></h1> <ul> <li v-for="(item, index) in $store.state.carList" :key="item"> {{ item.carName }} <button @click="$store.dispatch('delCarList', index)">×</button> </li> </ul> <hr /> <h1>vuex-getters:{{ doubleNum }}</h1> </div> </template>
4.2 逻辑
<script> import { mapState, mapMutations, mapGetters, mapActions } from "vuex"; export default { computed: { ...mapState(["num"]), ...mapGetters(["doubleNum"]), // 组件自己的计算属性 }, methods: { // ...mapMutations(["increase"]), ...mapActions({ myIncrease: "increase", //如果名字和本组件名字冲突 可取别名 }), ...mapMutations(["getActionList"]), add() { //直接用 this.myIncrease({ payload: 1 }); }, changeCar() { this.$store.dispatch("getActionList", index); }, }, }; </script>
5. 实际使用注意数据响应式
<script setup> import { onMounted, reactive } from "vue"; import {useStore} from 'vuex' import axios from "axios"; let userInfo = reactive({}); const store = useStore() let login = () => { axios .post("/xx/xx/cellphone", { phone: 186xxxx8753, password: "123456", }) .then((res) => { if (res.data.code == 200) { Object.assign(userInfo, res.data); console.log("userInfo", userInfo); store.commit("updateUserInfo",userInfo) } else { alert("登录失败"); } }); }; </script>
Object.assign(targetObj,obj)赋值一个对象到目标对象返回修改后的目标对象
