vuex4结合Vue3的简单使用

编程语言 2023-12-18 04:24:02 阅读次数: 0

1、Vuex介绍

1.1、Vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单说：VueX是个仓库，可以按照一定的规则实现所有组件的数据共享（获取、修改数据），比我们书写的EventBus更加强大。

Vue2 对应的版本：Vuex3

Vue3对应的版本：Vuex4，但实际上Vue3使用的Pinia代替Vuex。

1.2、什么时候使用Vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

简单说：开发大型项目使用Vuex，小型项目EventBus就够用了。

1.3、安装vuex

npm install vuex@next --save

建议在使用vue/cli 脚手架创建项目的时候，直接将vuex选择上，避免自己按照和配置的麻烦。如果使用vite搭建项目，默认是Pinia，需要手动安装vuex。

1.4、关于vuex的仓库

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

简单说：Vuex一个仓库，保存项目中所有组件的共享数据，他不仅仅全局对象，共享的数据具备响应式，需要按照指定的规则修改共享的数据

vuex有个缺点：在刷新页面时，Vuex中的数据会丢失，这是由于刷新会重新加载应用程序，导致Vuex状态的重置。一般在APP端可以禁用页面的刷新功能，PC端无法禁用。

针对PC端解决方案：

1、使用本地存储

2、配合后台程序实现持久化保存

3、使用专门的插件或库来管理应用程序的状态持久化

1.5、5个核心介绍

vuex有5个核心：

  • state ： 数据仓库，存放所有组件共享数据
  • mutation：提供对仓库中的数据进行同步修改的方法
  • action：提供对仓库中的数据进行异步修改的方法
  • getter：
  • module：拆分仓库

2、最简单的 Store

2.1、配置vuex

在src 下创建store文件夹，其中创建index.js文件，编写vuex的基本配置和初始化操作

// 导入vuex
import {
    
     createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
    
    
  // 初始化state函数，其中保存的是所有组件共享的数据
  state() {
    
    
    return {
    
    
      count: 100,
    };
  },
  // 提供修改state中数据的方法
  mutations: {
    
    
    add(state) {
    
    
      state.count++;
    },
  },
});

// 导出
export default store;

在main.js 文件中挂载vuex

import "./assets/main.css";

import {
    
     createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

const app = createApp(App);

app.use(router);
// 将 store 实例作为插件安装
app.use(store);

app.mount("#app");

2.2、使用vuex

在 views文件夹 下 创建 Hello.vue文件 ，获取Vuex中的数据

<template>
  <div>
    <p>msg:{
   
   { msg }}</p>
    <p>vuex中的count:{
   
   { count }}</p>
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      msg: "演示vuex的使用",
      count: 0,
    };
  },
  // 在vue实例初始化完成后，获取vux中的数据
  created() {
      
      
    // 由于已经将Vuex的实例绑定在app组件上，可以通过this直接获取
    // this.$store 即可获取到vuex的实例
    console.log(this.$store.state.count);
    this.count = this.$store.state.count;
  },
};
</script>

<style scoped></style>

2.3、修改数据

在 views文件夹 下 创建 world.vue 文件，调用vuex的 mutations 中提供的 add 方法完成数据修改操作

<template>
  <div>
    <button @click="changeData">修改vuex中的数据</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    changeData() {
      
      
      this.$store.commit("add");
      //   其实直接修改也是可以的，但是不推荐这个操作
      this.$store.state.count = 200;
    },
  },
};
</script>

<style scoped></style>

再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

简单说：通过mutation 中的方法，可以实现共享数据的可控性

3、vuex的详细介绍

Vuex有5个核心概念：state、getters、mutations、actions、modules

小小提示：操作vuex的仓库时，基本都提供两种方式：直接操作和辅助函数

3.1、核心state

  • 作用: 多个组件需要共享的数据, 入库, 放在state里面.

  • 组件中如何获取到state的数据呢?

3.1.1、编辑需要共享的数据

// 导入vuex
import {
    
     createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
    
    
  // 初始化state函数，其中保存的是所有组件共享的数据
  state() {
    
    
    return {
    
    
      count: 100,
      user: {
    
    
        name: "张无忌",
        age: 23,
        sex: "男",
        addr: "冰火岛",
      },
    };
  },
  // 提供修改state中数据的方法
  mutations: {
    
    
    add(state) {
    
    
      state.count++;
    },
  },
});

// 导出
export default store;

3.1.2、直接获取数据

在需要使用vuex中共享数据的页面，使用 this.$store.state.共享数据key值 即可直接获取共享数据

<template>
  <div>
    <p>{
   
   { count }}</p>
    <p>{
   
   { user }}</p>
  </div>
</template>

<script>
export default {
      
      
  // 在vue实例初始化完成后，获取vux中的数据
  created() {
      
      
    console.log(this.$store);
    console.log(this.$store.state.count);
    console.log(this.$store.state.user);
  },
  // 通过计算属性，返回数据
  computed: {
      
      
    count() {
      
      
      return this.$store.state.count;
    },
    user() {
      
      
      return this.$store.state.user;
    },
  },
};
</script>

<style scoped></style>

3.1.3、mapState辅助函数

vuex提供mapState辅助函数，更加快捷，灵活的获取vuex中共享的数据，辅助函数有两种书写方式

<template>
  <div>
    <p>{
   
   { count }}</p>
    <p>{
   
   { user }}</p>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import {
      
       mapState } from "vuex";
export default {
      
      
  // 通过计算属性，返回数据
  computed: {
      
      
    // 对象方式
    // ...mapState({
      
      
    //   count: (state) => state.count,
    //   user: (state) => state.user,
    // }),
    // 数组方式
    ...mapState(["count", "user"]),
  },
};
</script>

<style scoped></style>

3.2、核心mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

3.2.1、编辑mutation中的方法

// 导入vuex
import {
    
     createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
    
    
  // 初始化state函数，其中保存的是所有组件共享的数据
  state() {
    
    
    return {
    
    
      count: 100,
      user: {
    
    
        name: "张无忌",
        age: 23,
        sex: "男",
        addr: "冰火岛",
      },
    };
  },
  // 提供修改state中数据的方法
  mutations: {
    
    
    // state,就是仓库对象
    // payload修改的值
    // 一般为了区分，会将这些方法名全部大写
    CHANGE_COUNT(state, payload) {
    
    
      console.log("在仓库中，CHANGE_COUNT执行，", state, payload);
      state.count += payload;
    },

    CHANGE_USER(state, payload) {
    
    
      state.user.age += payload.num;
    },
  },
});

// 导出
export default store;

3.2.2、直接进行修改

使用commit来完成直接修改，this.$store.commit(“函数名”,数据)

<template>
  <div>
    <p>{
   
   { count }}</p>
    <p>{
   
   { user }}</p>
    <button @click="updateCount">修改count</button>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import {
      
       mapState, mapMutations } from "vuex";
export default {
      
      
  // 通过计算属性，返回数据
  computed: {
      
      
    ...mapState(["count", "user"]),
  },
  methods: {
      
      
    updateCount() {
      
      
      // 直接调用方法修改
      // this.$store.commit("CHANGE_COUNT", 3);
      // 采用对象方式修改
      this.$store.commit({
      
      
        type: "CHANGE_COUNT",
        num: 3,
      });
    },
  },
};
</script>

<style scoped></style>

若采用对象方式修改，payload接收到的是一个对象，需要处理。

CHANGE_COUNT(state, payload) {
     
     
    console.log("在仓库中，CHANGE_COUNT执行，", state, payload);
    state.count += payload.num;
},

3.2.3、辅助函数修改

vuex中提供 mapMutations 对象来辅助修改数据 ， 由于是辅助函数修改，在事件中直接书写修改的函数名并传递参数

<template>
  <div>
    <p>{
   
   { count }}</p>
    <p>{
   
   { user }}</p>
    <button @click="CHANGE_COUNT(4)">修改count</button>
    <button @click="changeNum(5)">修改count</button>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import {
      
       mapState, mapMutations } from "vuex";
export default {
      
      
  // 通过计算属性，返回数据
  computed: {
      
      
    ...mapState(["count", "user"]),
  },
  methods: {
      
      
    // 辅助函数，修改数据
    ...mapMutations(["CHANGE_COUNT"]),
    // 辅助函数，采用对象方式修改
    ...mapMutations({
      
      
      changeNum: "CHANGE_COUNT",
    }),
  },
};
</script>

<style scoped></style>

3.3、核心getters[重点]

作用: 相当于仓库中的计算属性, 对state进行二次处理，和state的作用几乎一样

3.3.1、准备数据

// 导入vuex
import {
    
     createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
    
    
  // 初始化state函数，其中保存的是所有组件共享的数据
  state() {
    
    
    return {
    
    
      count: 100,
      user: {
    
    
        name: "张无忌",
        age: 23,
        sex: "男",
        addr: "冰火岛",
      },
      vipArr: [
        {
    
     name: "张无忌", age: 23 },
        {
    
     name: "张三丰", age: 80 },
        {
    
     name: "金毛狮王", age: 60 },
        {
    
     name: "成昆", age: 60 },
      ],
    };
  },
  // 仓库中的计算属性
  getters: {
    
    
    // 对vips数据进行处理,过滤器年龄超过60岁的人
    vips(state) {
    
    
      return state.vipArr.filter((v) => v.age >= 60);
    },
  },
  // 提供修改state中数据的方法
  mutations: {
    
    
    // state,就是仓库对象
    // payload修改的值
    // 一般为了区分，会将这些方法名全部大写
    CHANGE_COUNT(state, payload) {
    
    
      console.log("在仓库中，CHANGE_COUNT执行，", state, payload);
      state.count += payload;
    },

    CHANGE_USER(state, payload) {
    
    
      state.user.age += payload.num;
    },
  },
});
// 导出
export default store;

3.3.2、直接获取数据

getters 本身就是对数据进行二次处理的，没有辅助函数方式

<template>
  <div>
    <h3>花甲之年，华山之巅</h3>
    <p v-for="v in vips" :key="v.name">{
   
   { v }}</p>
  </div>
</template>

<script>
import {
      
       mapGetters } from "vuex";
export default {
      
      
  // 获取vuex数据，建议使用计算属性，更加便捷
  computed: {
      
      
    ...mapGetters(["vips"]),
  },
  created() {
      
      
    // 直接通过属性访问
    console.log(this.$store.getters.vips);
  },
};
</script>

<style lang="less" scoped></style>

3.4、核心actions [重点]

作用: 异步修改数据. mutations修改数据是同步的. 如果想要异步修改数据, 就放在actions中.

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

3.4.1、准备数据

// 导入vuex
import {
    
     createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
    
    
  // 初始化state函数，其中保存的是所有组件共享的数据
  state() {
    
    
    return {
    
    
      count: 100,
      user: {
    
    
        name: "张无忌",
        age: 23,
        sex: "男",
        addr: "冰火岛",
      },
      vipArr: [
        {
    
     name: "张无忌", age: 23 },
        {
    
     name: "张三丰", age: 80 },
        {
    
     name: "金毛狮王", age: 60 },
        {
    
     name: "成昆", age: 60 },
      ],
      // 空数组 商品数据
      goods: [],
    };
  },
  // 仓库中的计算属性
  getters: {
    
    
    // 对vips数据进行处理,过滤器年龄超过60岁的人
    vips(state) {
    
    
      return state.vipArr.filter((v) => v.age >= 60);
    },
  },
  actions: {
    
    
    // 异步修改数据
    // context 相当于 this.$store
    // payload 数据
    ASYNC_SET_GOODS(context, payload) {
    
    
      setTimeout(() => {
    
    
        context.commit("SET_GOODS", payload);
      }, 2000);
    },
  },
  // 提供修改state中数据的方法
  mutations: {
    
    
    SET_GOODS(state, payload) {
    
    
      // 同步修改数据
      state.goods = payload;
    },
    // state,就是仓库对象
    // payload修改的值
    // 一般为了区分，会将这些方法名全部大写
    CHANGE_COUNT(state, payload) {
    
    
      console.log("在仓库中，CHANGE_COUNT执行，", state, payload);
      state.count += payload;
    },

    CHANGE_USER(state, payload) {
    
    
      state.user.age += payload.num;
    },
  },
});

// 导出
export default store;

其实不用actions，直接在mutations也可以完成异步修改数据的。只是actions是专门设计出来用于进行异步修改。

而在actions中最终还是需要使用mutations中的方法修改数据

3.4.2、 直接 dispatch 触发

触发修改数据与 mutations 修改基本一致，只需要将commit修改为dispatch即可

this.$store.dispatch ("函数名1", 数据);

this.$store.dispatch ({
    
    
  type: '函数名1',
  数据
});

3.4.3、通过辅助函数触发

import {
    
     mapActions } from 'vuex';

export default {
    
    
  methods: {
    
    
    ...mapActions(["函数名"]) // 数组写法
    ...mapActions({
    
     // 对象的写法
       键名: "函数名" 
    })
  }
}

3.5、核心modules

作用: 拆分仓库, 把一个仓库拆分成几份

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

3.5.1、拆分仓库

const moduleA = {
    
    
  state: () => ({
    
     ... }),
  mutations: {
    
     ... },
  actions: {
    
     ... },
  getters: {
    
     ... }
}

const moduleB = {
    
    
  state: () => ({
    
     ... }),
  mutations: {
    
     ... },
  actions: {
    
     ... }
}

const store = createStore({
    
    
  modules: {
    
    
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

3.5.2、获取数据

获取数据的时候，在正常操作的时候，加上模块名即可

this.$store.state.模块名.count

3.5.3、修改数据

this.$store.commit("模块名/函数名", 数据)

猜你喜欢

转载自blog.csdn.net/baozi7263/article/details/131237438
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022