彻底玩转vuex （含禹神求和案例）

最新推荐文章于 2024-10-04 00:46:18 发布
置顶 最新推荐文章于 2024-10-04 00:46:18 发布
阅读量564 收藏
点赞数 4
分类专栏： vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_75069372/article/details/132169519
版权

这里写目录标题

vuex

一 vuex是什么？

概念：专门在Vue 中实现集中式状态(数据)管理的一个Vue 插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。

vuex官方地址： vuex官方地址

什么时候使用vuex？
1 多个组件依赖同一个状态
2 来自不同组件的行为需要变更统一状态

二 vuex工作原理

1 工作原理图

vuex工作原理图
图中少一条线 此处vc也可以直接commit交给mutations处理

2 vuex原理分析

Backend API：后端接口
Devtools：vuex出的开发者调试工具
vuex 由三部分组成：这三部分由store（仓库）管理
1 Actions 动作：本质也是一个对象{} 当执行dispatch（动作类型，值）函数时，第二个参数值 可以通过ajax请求后端拿值 如果知道第二个参数 可以直接省略
2 Mutaitions 修改 ： 本质也是一个对象{} 此对象可以拿到state
3 State数据 ：本质是一个对象{} 存放数据
api及流程：
store.dispatch（分发）：dispatch（“进行的动作类型（如加减）”，值（加的值2/ajax请求的值））是一个函数
store.commit(提交) ：commit（“进行的动作类型（如加减）”，值（加的值2/ajax请求的值）） 交给 Mutaitions mutade（变化）更新 State中的内容 最后render渲染给组件

三 vuex环境搭建

1 npm i vuex@版本号

注意： vue2中只能用vuex的3版本 vue3中要用vuex的4版本
此处我是vue2的脚手架所以安装3版本

2 在src下新建store文件夹及index.js

注意有的人可能是新建了 一个vuex文件夹及store.js 这两种方式都行 官方推荐store下index.js这种方式
在这里插入图片描述

3 在index.js中创建store

index.js 代码如下：

//该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from "vue";
// 引入vuex
import Vuex from "vuex"
// 使用vuex插件
Vue.use(Vuex)

// 准备actions- 用于响应组件中的动作
const actions = {}
// 准备mutations-用于操作数据（state）
const mutations = {}
// 准备state-用于存储数据
const state = {}


// 创建并且暴露store
export default new Vuex.Store({
    // 传入配置项
    actions, mutations, state
})

4 在main.js中引入store 并添加配置项

在这里插入图片描述
这样就成功搭建好了!!!

四 禹神同款案例

1 求和案例 纯vue版本

写个纯vue版 这不是有手就行吗 这个案例就不详细说了 直接上代码
AnLi.vue 组件代码：

<template>
  <div class="box">
    <h1>当前求和为:{{ sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="jian">-</button>
    <button @click="jishuadd">当前值为奇数在加</button>
    <button @click="ddadd">等一等在加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 0,
      n: 1,
    };
  },
  methods: {
    add() {
      this.sum += this.n;
    },
    jian() {
      this.sum -= this.n;
    },
    jishuadd() {
      if (this.sum % 2) {
        this.sum += this.n;
      }
    },
    ddadd() {
      setTimeout(() => {
        this.sum += this.n;
      }, 500);
    },
  },
};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>

运行结果截图为：
在这里插入图片描述

2 求和案例 纯vuex版本（基础版本）

store下index.js代码：

//该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from "vue";
// 引入vuex
import Vuex from "vuex"
// 使用vuex插件
Vue.use(Vuex)

// 准备actions- 用于响应组件中的动作    
const actions = {
    // 如果没有逻辑  可以直接commit给mutations处理   以下就是没有逻辑的
    // jiafa(context, val) {
    //     // 此处有两个参数 context有上下文的意思是一个对象   第二个参数为值
    //     console.log('actions中的jianfa动作被调用了', context, val);
    //     // 交给mutations处理
    //     context.commit('JIAFA', val)

    // },
    // jianfa(context, val) {
    //     context.commit('JIANFA', val)
    // },
    // // 逻辑写在这里就对了（ajax请求  或者if判断）
    jishujiafa(context, val) {
        if (context.state.sum % 2) {
            context.commit('JIAFA', val)
        }
    },
    ddjiafa(context, val) {
        setTimeout(() => {
            context.commit('JIAFA', val)
        }, 500)
    },
}
// 准备mutations-用于操作数据（state）   这里写操作数组的方法
const mutations = {
    JIAFA(state, val) {
        // 此处第一个参数为state数据   第二个参数为值
        console.log('mutations中的JIAFA被调用了', state, val);
        state.sum += val
    },
    JIANFA(state, val) {
        state.sum -= val
    }
}
// 准备state-用于存储数据
const state = {
    sum: 0,
}


// 创建并且暴露store
export default new Vuex.Store({
    // 传入配置项
    actions, mutations, state
})

AnLi.vue代码：

<template>
  <div class="box">
    <h1>当前求和为:{{ $store.state.sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="jian">-</button>
    <button @click="jishuadd">当前值为奇数在加</button>
    <button @click="ddadd">等一等在加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    add() {
      // 这里直接commit交给mutations处理
      this.$store.commit("JIAFA", this.n);
    },
    jian() {
      this.$store.commit("JIANFA", this.n);
    },
    jishuadd() {
      this.$store.dispatch("jishujiafa", this.n);
    },
    ddadd() {
      this.$store.dispatch("ddjiafa", this.n);
    },
  },
};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>

运行结果：
在这里插入图片描述

3 多组件通信案例

组件可以直接通过$store.state.拿到vuex中state中的数据

AnLi组件代码：

<template>
  <div class="box">
    <h1>当前求和为:{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="jian(n)">-</button>
    <button @click="jishuadd(n)">当前值为奇数在加</button>
    <button @click="ddadd(n)">等一等在加</button>
    <h4 style="color: red">AnLi1组件中的人员个数为:{{ list.length }}</h4>
  </div>
</template>

<script>
// import store from "@/store";

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    // 程序员手写
    // add() {
    //   // 这里直接commit交给mutations处理
    //   this.$store.commit("JIAFA", this.n);
    // },
    // jian() {
    //   this.$store.commit("JIANFA", this.n);
    // },
    // jishuadd() {
    //   this.$store.dispatch("jishujiafa", this.n);
    // },
    // ddadd() {
    //   this.$store.dispatch("ddjiafa", this.n);
    // },

    // 借助mapMutations对象生成对应的方法   方法中会调用commit去联系Mutations  (注意还要在使用add方法是传参) （对象写法）
    ...mapMutations({ add: "JIAFA", jian: "JIANFA" }),
    // 借助mapMutations对象生成对应的方法   方法中会调用commit去联系Mutations   （数组写法）
    //注意  方法名与  Mutations中的方法名一样
    // ...mapMutations(['JIAFA','JIANFA']),

    // 借助mapActions对象生成对应的方法   方法中会调用dispatch去联系mapActions （对象写法）
    ...mapActions({ jishuadd: "jishujiafa", ddadd: "ddjiafa" }),
    // 借助mapActions对象生成对应的方法   方法中会调用dispatch去联系mapActions （数组写法）
    // ...mapActions(['jishujiafa','ddjiafa']),
  },
  computed: {
    // 方式一    程序员自己手写计算属性  简化代码
    // he() {
    //   return this.$store.state.sum;
    // },
    // beishu() {
    //   return this.$store.getters.bigSum;
    // },
    // 方式二：对象写法
    // ...mapState({ he: "sum" }),
    // ...mapGetters({ beishu: "bigSum" }),
    // 数组写法   要求计算属性名与state中的名字一样
    // sum() {
    //   return this.$store.state.sum;
    // },
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },
    // 简写如下：
    ...mapState(["sum", "list"]),
    ...mapGetters(["bigSum"]),
  },
};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>

AnLi1组件代码：

<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入添加人姓名" v-model="namee" />
    <button @click="addname">添加</button>

    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <h3 style="color: red">AnLi组件的求和为：{{ sum }}</h3>
  </div>
</template>

<script>
//  引入nanoid
import { nanoid } from "nanoid";
export default {
  data() {
    return {
      namee: "",
    };
  },
  methods: {
    addname() {
      const listObj = { id: nanoid(), name: this.namee };
      //   console.log(listObj);
      this.$store.commit("ADDL", listObj);
      this.namee = "";
    },
  },
  computed: {
    list() {
      return this.$store.state.list;
    },
    sum() {
      return this.$store.state.sum;
    },
  },
};
</script>

<style>
</style>

store下index中代码：

//该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from "vue";
// 引入vuex
import Vuex from "vuex"
// 使用vuex插件
Vue.use(Vuex)

// 准备actions- 用于响应组件中的动作    
const actions = {
    // 如果没有逻辑  可以直接commit给mutations处理   以下就是没有逻辑的
    // jiafa(context, val) {
    //     // 此处有两个参数 context有上下文的意思是一个对象   第二个参数为值
    //     console.log('actions中的jianfa动作被调用了', context, val);
    //     // 交给mutations处理
    //     context.commit('JIAFA', val)

    // },
    // jianfa(context, val) {
    //     context.commit('JIANFA', val)
    // },
    // // 逻辑写在这里就对了（ajax请求  或者if判断）
    jishujiafa(context, val) {
        if (context.state.sum % 2) {
            context.commit('JIAFA', val)
        }
    },
    ddjiafa(context, val) {
        setTimeout(() => {
            context.commit('JIAFA', val)
        }, 500)
    },
}
// 准备mutations-用于操作数据（state）   这里写操作数组的方法
const mutations = {
    JIAFA(state, val) {
        // 此处第一个参数为state数据   第二个参数为值
        console.log('mutations中的JIAFA被调用了', state, val);
        state.sum += val
    },
    JIANFA(state, val) {
        state.sum -= val
    },
    ADDL(state, listObj) {
        state.list.unshift(listObj)
    }
}
// 准备state-用于存储数据
const state = {
    sum: 0,
    list: [{ id: 1, name: "小明" }],
}


// 准备getters用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}


// 创建并且暴露store
export default new Vuex.Store({
    // 传入配置项
    actions, mutations, state, getters
})

实现多组件共享数据运行结果：

红色区域为不同组件拿到不同数据的结果

五 vuex开发者工具

vuex也是vue官方做的 也就是选vue开发者工具
选择vuex开发者工具
在这里插入图片描述
在这里插入图片描述

六 store中的其他配置项

1 getters配置项

state配置项和getters配置项 就相当于 data 和computed一样
用于将state中的数据进行加工
在store下inidex.js中添加配置项：

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

在组件中使用时：$store.getters.bigSum

index.js代码：

//该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from "vue";
// 引入vuex
import Vuex from "vuex"
// 使用vuex插件
Vue.use(Vuex)

// 准备actions- 用于响应组件中的动作    
const actions = {
    // 如果没有逻辑  可以直接commit给mutations处理   以下就是没有逻辑的
    // jiafa(context, val) {
    //     // 此处有两个参数 context有上下文的意思是一个对象   第二个参数为值
    //     console.log('actions中的jianfa动作被调用了', context, val);
    //     // 交给mutations处理
    //     context.commit('JIAFA', val)

    // },
    // jianfa(context, val) {
    //     context.commit('JIANFA', val)
    // },
    // // 逻辑写在这里就对了（ajax请求  或者if判断）
    jishujiafa(context, val) {
        if (context.state.sum % 2) {
            context.commit('JIAFA', val)
        }
    },
    ddjiafa(context, val) {
        setTimeout(() => {
            context.commit('JIAFA', val)
        }, 500)
    },
}
// 准备mutations-用于操作数据（state）   这里写操作数组的方法
const mutations = {
    JIAFA(state, val) {
        // 此处第一个参数为state数据   第二个参数为值
        console.log('mutations中的JIAFA被调用了', state, val);
        state.sum += val
    },
    JIANFA(state, val) {
        state.sum -= val
    }
}
// 准备state-用于存储数据
const state = {
    sum: 0,
}


// 准备getters用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}


// 创建并且暴露store
export default new Vuex.Store({
    // 传入配置项
    actions, mutations, state, getters
})

AnLi.vue代码为：

<template>
  <div class="box">
    <h1>当前求和为:{{ $store.state.sum }}</h1>
    <h3>当前求和放大10倍为：{{ $store.getters.bigSum }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="jian">-</button>
    <button @click="jishuadd">当前值为奇数在加</button>
    <button @click="ddadd">等一等在加</button>
  </div>
</template>

<script>
// import store from "@/store";

export default {
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    add() {
      // 这里直接commit交给mutations处理
      this.$store.commit("JIAFA", this.n);
    },
    jian() {
      this.$store.commit("JIANFA", this.n);
    },
    jishuadd() {
      this.$store.dispatch("jishujiafa", this.n);
    },
    ddadd() {
      this.$store.dispatch("ddjiafa", this.n);
    },
  },
};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>

运行截图：
在这里插入图片描述

2 mapstate和mapgetters

mapstate （映射state）和mapgetters（映射getters）是为了简化代码的
此处想利用差值语法直接写sum 可以吗
第一种方法：程序员直接自己手写计算属性

计算属性：

  computed: {
    he() {
      return this.$store.state.sum;
    },
    beishu() {
      return this.$store.getters.bigSum;
    },
  },

使用时插值语法：
在这里插入图片描述
第二种方法：
利用 mapstate （映射state）和mapgetters（映射getters） 本质是两个对象
第一步先引入
import { mapState, mapGetters } from "vuex";
a：对象写法

  ...mapState({ he: "sum" }),
  ...mapGetters({ beishu: "bigSum" }),

使用时：
在这里插入图片描述
数组写法：要求计算属性名与state中的名字一样

    ...mapState(["sum"]),
    ...mapGetters(["bigSum"]),

使用方法：
在这里插入图片描述
综合对比 ：
在这里插入图片描述

3 mapActions和mapMutations

利用mapActions和mapMutations 简化代码
1 借助mapMutations对象生成对应的方法 方法中会调用commit去联系Mutations
2借助mapActions对象生成对应的方法 方法中会调用dispatch去联系mapActions

代码如下：

 methods: {
    // 程序员手写
    // add() {
    //   // 这里直接commit交给mutations处理
    //   this.$store.commit("JIAFA", this.n);
    // },
    // jian() {
    //   this.$store.commit("JIANFA", this.n);
    // },
    // jishuadd() {
    //   this.$store.dispatch("jishujiafa", this.n);
    // },
    // ddadd() {
    //   this.$store.dispatch("ddjiafa", this.n);
    // },

    // 借助mapMutations对象生成对应的方法   方法中会调用commit去联系Mutations  (注意还要在使用add方法是传参) （对象写法）
    ...mapMutations({ add: "JIAFA", jian: "JIANFA" }),
    // 借助mapMutations对象生成对应的方法   方法中会调用commit去联系Mutations   （数组写法）
    //注意  方法名与  Mutations中的方法名一样
    // ...mapMutations(['JIAFA','JIANFA']),

    // 借助mapActions对象生成对应的方法   方法中会调用dispatch去联系mapActions （对象写法）
    ...mapActions({ jishuadd: "jishujiafa", ddadd: "ddjiafa" }),
    // 借助mapActions对象生成对应的方法   方法中会调用dispatch去联系mapActions （数组写法）
    // ...mapActions(['jishujiafa','ddjiafa']),
  },

七 vuex模块化

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
李白咩
关注
专栏目录
Vuex(仓库)超详细解析+配图
m0_73783485的博客
08-15 480
Vuex是干什么的？？Vuex的作用是什么？？？Vuex怎么去使用？？？？一篇解决所有！！配图文讲解
图解vuex-一张图让你学会vuex的所有知识点
qq_32458791的博客
11-20 768
禹神：一小时彻底搞懂跨域&解决方案
wk964269669的博客
09-16 223
1. 浏览器的同源策略 2. 跨域会受到哪些限制 4. CORS 解决 Ajax 跨域问题 5. JSONP 解决跨域问题 6. 配置代理解决跨域
Vue3学习笔记 - 禹神YYDS
Unity、UE5开发
05-15 722
Vue3学习笔记
禹神electron学习~
weixin_55209970的博客
06-28 882
最近时间比较富裕 咱们浅浅来学习下electron。
禹神3小时快速上手typescript
wk964269669的博客
09-16 708
TypeScript 由微软开发，是基于 JavaScript 的⼀个扩展语⾔。TypeScript 包含了 JavaScript 的所有内容，即： TypeScript 是 JavaScript 的超集。TypeScript 增加了：静态类型检查、接⼝、 泛型等很多现代开发特性，更适合⼤型项⽬的开发。TypeScript 需要编译为 JavaScript ，然后交给浏览器或其他 JavaScript 运⾏环境执⾏。
Vue路线？选择？禹神直播课笔记
starry-sea1412的弃坑之路
05-27 472
该文章观看禹神直播课所做的笔记，具体的内容请点击链接查看！文章内容如下：直播回放：禹神亲绘VUE3知识图谱，vue学习路线免费领取！_哔哩哔哩_bilibili禹神亲绘Vue2.x+Vue3.x知识图谱！涵盖所有关键知识点，搜索微信公众号：尚硅谷教育，回复：vue知识图谱，免费领取！vue作者尤雨溪现场rap，翻唱K.Dot 《HUMBLE.》，嗨翻全场！
跟随禹神的axios学习笔记
weixin_57992249的博客
09-09 702
跟随禹神的 axios 学习
Vue3 + TS 尚硅谷 禹神2023最新版
海棠的博客
02-06 271
【尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程】
跟着禹神学Vue3.md
01-21
这个是学习禹神最新Vue课程做的笔记！！！
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
尚硅谷VUE核心技术课件资料-笔记总结
04-17
- Vuex介绍：理解Vuex作为集中式状态管理模式的重要性，学习其核心概念如state、mutations、actions、getters。 - 使用Vuex：实践如何在项目中集成Vuex，管理全局状态。 7. **路由管理Vue Router** - Vue Router...
6. toDoList案例
s12345672的博客
10-22 991
toDoList.js $(function () { load(); // 1. 按下回车键，把完整数据存储到本地存储里面 // 存储数据的格式：var todolist = [{title:"xxx",done:false}] $("#title").on("keydown", function (event) { // 判断用户是否按下的是回车键 if (event.keyCode === 13) { ...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 879
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1215
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 922
自定义指令
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 359
Vue根实例、实例总结
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 582
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Vue3进阶笔记：新特性与学习策略
本文档是关于跟随禹神学习Vue3的笔记，作者在阅读禹神的最新教程过程中记录了学习心得和关键知识点。以下是从文章中提炼出的重要内容： 1. **新学习点**： - **Props和Provide/Inject的函数式传递**：Vue3允许通过...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值