vue3 使用vuex

简介: vuex作为 vue中最流行的状态管理工具,在vue3版本使用的时候也是有些注意事项的 总结如下

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)  赋值一个对象到目标对象

返回修改后的目标对象




相关文章
|
7天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
64 2
|
10天前
|
移动开发 JavaScript 前端开发
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
126 69
|
1天前
Vue3 中使用 Event Bus
【10月更文挑战第16天】Event Bus 是 Vue3 中一种简单而实用的通信方式,在一些简单的场景中可以发挥重要作用。但在实际应用中,要根据项目的具体需求和复杂度,选择合适的通信方式,以实现最佳的性能和可维护性。同时,要遵循最佳实践,合理使用 Event Bus,避免出现问题。
10 5
|
1天前
|
前端开发 UED
vue3知识点:Suspense组件
vue3知识点:Suspense组件
11 4
|
1天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
10 2
|
1天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
10 1
|
7天前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期
|
8天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
26 2
|
9天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
11 1
|
9天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
67 0