零基础快乐学习vuex

已于 2024-07-30 13:19:37 修改
阅读量1k 收藏 13
点赞数 17
文章标签： 学习 前端 javascript vue.js
于 2024-07-30 12:57:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65475272/article/details/140735453
版权

也许有人会说。vuex已经被淘汰了，没人用，现在都是用大菠萝(pinia),但我得想法是，学一个东西要学习他的背景，为什么出现，然后一步一步的进行优化，才有今天的产物Pinia，由于现在有vue2和vue3，在这两个里面的用法可能不太一样，人非圣贤，孰能无过，希望我在错误的时候，大家指正一下，废话不多说，开始学习vuex。以下都来自官方文档！

什么是“状态管理模式”？

让我们从一个简单的 Vue 计数应用开始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

  • state，驱动应用的数据源；
  • view，以声明方式将 state 映射到视图；
  • actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想

什么情况下我应该使用 Vuex？

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

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

 为什么要学习vuex？

我曾经听过王老师一句话，任何一个新技术的出现，都是为了解决以前的痛点。

我们知道，数据传递的方式有很多,父传子，子发射emit事件，还有兄弟相互传，但如果嵌套很多层级呢，一个一个往下传，即使你会写，难免麻烦，vuex就是解决这个痛点，可以理解vuex是一个仓库，存放一些数据，某个组件想用仓库里面的东西可以直接拿取

使用vuex

步骤一：NPM：

使用 npm 包管理器安装 Vuex ，--save是全局安装的意思

npm install vuex --save

在Main.js文件中使用Vue.use(Vuex)来显式地安装Vuex插件。在整个应用程序中使用Vuex的功能。

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 引入刚刚创建的 store

const app = createApp(App);
app.use(store); // 使用 store
app.mount('#app');

步骤二：创建仓库

在src文件下创建一个名为store的文件夹,在文件夹里面创建Index.js文件

import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {},
  actions: {},
  getters: {},
});

// 导出 store
export default store;

说明：

  1. state: 存放全局共享的数据，这里初始化了 counter。
  2. mutations: 用于修改 state 的方法。
  3. actions: 用于处理异步操作。
  4. getters: 用于获取 state 的数据并进行一些计算。

步骤三：state的使用（一下的方法会一种就行）

在template模板上访问

方法一：

vue2 和vue3在模板上都可以这么访问

$store.state.counter

<template>
  <div>
    <p>Counter: {{ $store.state.counter }}</p>
  </div>
</template>
方法二： 
vue2中computed

在vue2中，有两种写法

export default {
  computed: {
    counter() {
      return this.$store.state.counter; 
    }
  },
  // 其他组件选项...
}

 <p>Counter: {{ counter }}</p>
vue2中 mapState映射
  • 导入mapState并把所需要的State域中的属性映射为当前组件的计算属性。
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['counter']) // 将 counter 映射为组件的计算属性
  },
  // 其他组件选项...
}

 <p>Counter: {{ counter }}</p>
vue3中
第一种computed
<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const counter = computed(() => store.state.counter);
</script>
第二种useStore 
<script setup>
import {toRefs} from "vue"
import { useStore } from 'vuex';

const store = useStore();
const {name, level} = toRefs(store.state)
</script>

步骤四:getter的使用

getter相当于computed,

import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
      users:[{id:1,name:'why',age:20},{id:2,name:'jion',age:30}]
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {},
  actions: {},
  getters: {
      doubleCounter(state) {return state.counter*2},
      totalAge(state) {
          return state.users.reduce((preValue,item) =>{
              return preValue+item.age
          },0)
      }
},
});

// 导出 store
export default store;

如果一个Getter里面想拿另一个getter，那么需要在getter下的函数传递两个参数，第一个参数是state,第二个参数就是getter,

import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
      users:[{id:1,name:'why',age:20},{id:2,name:'jion',age:30}]
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {},
  actions: {},
  getters: {
      doubleCounter(state) {return state.counter*2},
      totalAge(state) {
          return state.users.reduce((preValue,item) =>{
              return preValue+item.age
          },0)
      },
       doubleGetter(state,getter) {return `total:${getter.doubleCounter}`},
},
});

// 导出 store
export default store;

getter还可以封装函数，例如我想获取某一个id的所有信息

import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
      users:[{id:1,name:'why',age:20},{id:2,name:'jion',age:30}]
    };
  },
  getters: {
     getFriend(state){
               return function(id) {
                  const friend = state.users.find(item => item.id == id)
                  return friend
                                   }
                           }
           },
});

// 导出 store
export default store;
 <p>Counter: {{ $store.getter.getFriend(1)}}</p>

 getter映射:mapGetters

在vue2中
第一种
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapGetter(['doubleCounter']) 
  },
  // 其他组件选项...
}
第二种
在vue3中
<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const message = computed(()=>{store.getter.doubleCounter})
</script>

步骤五：Mutations的使用

更改vuex中的store唯一的办法就是提交mutations

import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {changeCounter(state){state.counter = 1}},
  actions: {},
  getters: {},
});

// 导出 store
export default store;
export default {
  methods: {
  //点击事件，提交changeCounter
   changeCounter(){
       this.$store.commit('changeCounter')
      }
  },
  // 其他组件选项...
}

如果想让外部更改数据的话,传入两个参数，提交的时候传进来一个参数或者一个对象

import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {changeCounter(state,payload){state.counter = payload}},
  actions: {},
  getters: {},
});

// 导出 store
export default store;
export default {
  methods: {
  //点击事件，提交changeCounter
   changeCounter(){
       this.$store.commit('changeCounter',222)
      }
  },
  // 其他组件选项...
}
常量使用

在store文件夹下建立一个mutation_type.js文件

export const CHANGE_INFO = 'CHANGE_INFO'
import { createStore } from "vuex";
//引入这个常量
import { CHANGE_INFO } from "./mutation/type"

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {[CHANGE_INFO ](state){state.counter = 1}},
  actions: {},
  getters: {},
});

// 导出 store
export default store;

这里的中括号的意思就是

const key = 123
const obj = {
    [key]:345
}

在模板里面

//引入常量
import {CHANGE_INFO} from "@/store/mutation/type.js"
export default {
  methods: {
  //点击事件，提交changeCounter
   changeCounter(){
       this.$store.commit(CHANGE_INFO,222)
      }
  },
  // 其他组件选项...
}

mapMutations映射

import { mapMutations} from 'vuex';

export default {
  computed: {
    ...mapMutations(['changeCounter']) 
  },
  // 其他组件选项...
}
重要原则 

Mutations内部不要执行异步操作，只能是同步

步骤六：actions的使用发送网络请求，

不允许直接拿state,还是要进行提交mutations 来进行修改，在这里可以执行异步操作， 

import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {changeCounter(state,payload){state.counter = payload}},
  actions: {
incrementAction(context){ console.log(context.commit,context.getter,context.state)
                        context.commit('changeCounter')
                        }


},
  getters: {},
});

// 导出 store
export default store;
import { mapMutations} from 'vuex';

export default {
  methods: {
    //点击事件
     actionRtnClick(){ this.$store.dispatch('incrementAction')}
  },
  // 其他组件选项...
}
action传参
import { createStore } from "vuex";

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {changeCounter(state,payload){state.counter = payload}},
  actions: {
     changeAction(context,payload){ console.log(context.commit,context.getter,(context.state)
                        console.log(payload)
                        context.commit('changeCounter',payload)

                        }


},
  getters: {},
});

// 导出 store
export default store;
import { mapMutations} from 'vuex';

export default {
  methods: {
    //点击事件
     actionRtnClick(){ this.$store.dispatch('changeAction',333)}
  },
  // 其他组件选项...
}
mapAction映射
import { mapMutations} from 'vuex';

export default {
  computed: {
    ...mapActions(['changeAction']) 
  },
  // 其他组件选项...
}

在模板上就可以直接绑定这个方法

 <p @click="changeActions(777)"></p>
发送网络请求

会前面的网络请求就很简单，思路就是在action里面进行网络请求，模板在页面未加载的钩子函数里面就发起派发一个dispatch这个actions里面的函数，得到res,在通过mutatiom修改state,页面引入vuex就可以使用了。

步骤七：modules的使用

最后一个知识点

因为一个项目可能有很多个组件，现在就是所有组件的数据都在一个state里面，vuex是一个单一数据源，不建议多个store,modules就是给store分模块

在store文件夹下建立一个modules文件夹，里面放入home.js文件，

const counter =  {
  state() {
    return {
      counter: [], // 初始化 counter 的值
    },
muctions:{},
actions:{}
}
export default counter

在vuex里面引入这个文件

import { createStore } from "vuex";
import counter from "./modules/home"

// 创建 Vuex store
const store = createStore({
  // state 中存放全局共享的数据
  state() {
    return {
      counter: 0, // 初始化 counter 的值
    };
  },
  // 可以在这里添加 mutations、actions 和 getters 
  mutations: {},
  actions: {}
},
  getters: {},
modules:{
home:counter 
}
});

// 导出 store
export default store;

数据的模板需要改变，其他不用改变 

 <p>Counter: {{ $store.state.home.banner}}</p>

默认和命名空间

默认情况下，action 和muctions仍然是注册在全局的命名空间中，如果使用多个模块的时候，命名要非常的注意，如果想要互不影响就需要命名空间的约束

const counter =  {
namespaced:true，//命名空间
  state() {
    return {
      counter: [], // 初始化 counter 的值
    },
muctions:{},
actions:{}
}
export default counter

读取时，所有都要加模块才能读取到

 <p>Counter: {{ $store.getter['counter/方法名']}}</p>

派发需要这么做

function incrementcount(){
store.dispatch("counter/crementCountAction")
}

好啦学完vuex啦，真棒！！

在水..一方
关注
vuex中为什么mapState 解构放在compued里, 不放在data里?
蓝with黑的博客
12-19 1088
在Vuex中使用mapState将 Vuex store 中的状态映射到组件的计算属性（computed）中的原因是为了更方便地在组件中使用这些状态，并。mapState 实际上是，而不是放在组件的 data 中。这是因为 Vuex 中的状态通常用于在应用程序的多个组件之间共享和管理。当这些状态发生变化时，。将 mapState 结果放在 computed 中的好处是可以直接在模板中使用这些计算属性，就像使用 data 中的属性一样，但又能够保持响应式。
从零开始的Vue学习
SyntaxEr的博客
03-29 1191
从零开始的Vue学习(坚持到第九天，持续更新中) 前言 ​ 这个笔记参考了官方文档和多篇文章，虽然是自己一个字一个字手打的，但还是算是转载，并非原创。分享 这个笔记的作用一是监督自己，二是希望帮助到和我一样在学习vue的小伙伴。 ​ 同时，我自己照着教程写的程序源码也会在下面分享出来。 ​ 静心学习，无限进步！ ​ 源码：gitee https://gitee.com/xiaohufight/vue-learning 参考链接: 1、我们为什么要用Vue,它解决了什么问题,如何使用它 https
Webpack基础知识学习
L863683305的博客
01-19 577
vue全家桶 vue技术栈：vue + vue-router + vuex + vue-cli + Es6 + webpack + UI + node Webpack 在vue-cli中已经配置的比较好。 webpack是JS应用程序的打包器，把项目进行打包处理。 webpack功能： 代码转换  ts==》js   scss，less==》css 文件优化  压缩 合并 代码校验  检...
前端工程师的摸鱼日常（3），2024年最新价值2000元的学习资源泄露
2401_84139624的博客
04-19 829
本来一个小程序陆陆续续改了几个月，测试完基本都没问题了，然后前段时间突然要加功能，就给另一个前端 小伙子去跟这个后端对接了，我后来我都没管过，出问题了肯定是那个前端没改好。还有这个破网络，内网，经常断开连接， 早上那会根本连不上，本来他么的给我咋咋呼呼的我都不情愿，完了他还说让我快点，人家测试等着，一直催一直催。闲的时候想忙，忙的时候想着闲，就比如我去年在北京一个金融公司搞混合开发写H5，那真的是忙得一批，差点就得躺板板，本来北京通勤时间也长，一月无休天天加班，最早就是晚八点。”人家都直接让我滚蛋了。
2022年11月前端学习笔记
weixin_48894212的博客
11-01 3340
11月前端学习笔记（react、nuxt3、Babylon.js、vue3、ts、vuex、vant组件库、Naive UI）
Vue基础入门---Vue-cli 教程
热门推荐
evior
09-02 4万+
Vue-cli是vue官方出品的快速构建单页应用的脚手架，如果你是初次尝试Vue，我不建议使用，推荐你老老实实用普通引入javascript文件的方式进行学习（你可以去看我的vue视频教程的1-4季），这里牵扯的东西很多，有webpack，npm，nodejs，babel等等，很容易产生从入门就放弃的思想。 Vue-cli 一、安装vue-cli 安装vue-cli的前提是你已经安装了npm...
Vue学习随笔+商城项目【下】
qq_47654010的博客
02-10 5233
更新日期：2021-2-10 晚 【新年快乐】 先看这里：Vue学习随便+商城项目【上】 目录（十二）组件化高级12.1 slot-插槽的基本使用12.2 slot-具名插槽的使用12.3 编译的作用域12.4 作用域插槽案例（十三）Vue实例的生命周期13.1 生命周期图13.2 再探究13.2.1 beforeCreate之前13.2.2 beforeCreate和created钩子函数间的生命周期13.2.3 created钩子函数和beforeMount间的生命周期13.2.3.1el选项对生.
新手小白：一文带你用vite从零搭建企业级开发环境
weixin_46621409的博客
01-01 692
在这工作的半年时间里，开始接触了前端开发，技术栈主要用的是 vue2，但是自己利用时间也学习了 vue3，组合式 api 和 vue3 的各种生态比 vue2 好用太多了，特别是状态管理库 pinia 比 vuex 简介很多，构建工具也从 vue-cli 变成了 vite。这篇文章就带大家从零搭建一套企业级的开发环境。
学习计算机编程（IT、偏网站开发）的参考学习网址syk
chouzhan0246的博客
06-01 9851
这两年自己学到了许多东西，发现以前想学，可却不知道在哪里学，没有好的学习资源，这里我把这一年自己学习过程中了解到的好的计算机相关知识的学习网址分享给大家，虽然不是很全面，但希望能帮到那些想找学习资源的博友们。 IT学习资料（初晓） 1. 综合学习网址 （1）教学网站 http://...
vuex的基础
01-27
Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生...Vue的官方调试工具devtoolsextension，提供了诸如零配置的time-travel
vuex-model-helper:帮助您更快乐地使用vuex和v-model
05-18
帮助您更快乐地使用vuex和v-model 安装 yarn add vuex-model-helper # or by npm npm install --save vuex-model-helper 如何使用vuex-model-helper 使用mutationGenerator()生成您的v模型突变 import Vuex from ...
关于vuex的学习实践笔记
08-30
Vuex 是 Vue.js 应用的状态管理库，它旨在提供一个中心化的状态仓库，以便管理应用程序中的所有组件共享的状态。这种管理模式特别适用于组件之间...学习和实践 Vuex，可以帮助开发者构建更复杂且结构清晰的 Vue 应用。
vuex学习之Actions的用法详解
12-08
在Vuex中，Actions是用来处理应用中的异步操作的，它是与Mutation紧密相关的但又有所区别的概念。在深入理解Actions之前，我们先回顾一下Mutation的基本原理。Mutation是Vuex中用于修改store状态的唯一方法，它必须...
Vuex提升学习篇
01-19
本文介绍了Vuex 提升学习教程。如果本篇有看不明白的地方，请移步上一篇：Vuex 入门 上一篇我们讲了如何通过一些简单的动作来改变 store.js 中的数据对象，在实际工作中，这是完全无法满足工作需求的，所以这篇我们...
批量归一化 BN(Batch Normalization) (减少重复学习 - 加速损失收敛) + 代码实现 ——笔记2.15《动手学深度学习》
科研汪小陈的博客
11-08 1024
批量归一化固定小批量中的均值和方差，然后学习出适合的偏移和缩放； 可以加速收敛速度（比如以前学习率是0.01，现在用了批量归一化后，可以调到0.1） 不会出现之前：学习率太大的话，上面 (靠近损失的梯度) 会炸掉； 不会出现之前：学习率太小的话，下面 (靠近数据的模型参数) 会学不动； 每一个层的输出都通过均值方差放在一起了，上下层的分布都差不多是正态分布； 但一般不改变模型精度
Greiner 经典力学（多体系统和哈密顿力学）第十二章 学习笔记（Rotation About a Point）
Ivan 的专栏
11-09 826
上一章是绕定轴转动，这章是绕定点转动。这一章明显上难度了。
计划系统学习C#
j17805056906的博客
11-09 354
**常用类库**：学习如何使用一些常用的C#类库，比如字符串操作（`string`）、日期（`DateTime`）、集合（`List`, `Array`等）。**实践**：可以进行一个完整的项目，比如一个简单的任务管理应用、书籍借阅系统或在线商品管理系统。**实践**：可以制作稍微复杂的应用程序，比如多线程文件下载工具、管理任务的小应用程序等。**实践**：写一些小的程序，比如计算器、猜数字游戏、字符串操作练习等。- **属性和方法**：学习自动属性、静态方法、静态属性、扩展方法等。
青少年学习倦怠测评
一火的专栏
11-09 177
未来，可以进一步拓展研究样本和范围，深入探讨学习倦怠的影响因素和干预措施，为青少年的教育发展贡献更多的力量。通过编制问卷，收集学生在学习过程中的情感体验、学习态度、学业成绩等方面的信息，进而评估学生的学习倦怠情况。为了全面评估青少年的学习倦怠情况，本研究基于文献综述和实证调查，编制了一份包含情感耗竭、学业疏离和低成就感三个维度的青少年学习倦怠测评问卷。随着教育竞争的日益激烈，青少年面临着巨大的学习压力。学校和教师应该注重培养学生的学习兴趣和爱好，鼓励学生参加课外活动和兴趣小组，拓宽学生的知识面和视野。
Python基础学习-04列表List
最新发布
soarfeng的专栏
11-10 445
• 使用[] 定义一个列表3） L = [[1,2,3],[4,5,6],[7,8,9]• 如何掌握本节内容1）掌握并记住：一维、二维列表、索引、分片操作、函数、数组解析等2）课后：把代码自己敲一遍。
深入理解Vuex的个人学习笔记
这份学习笔记代码将以一种循序渐进的方式，从基础到进阶，逐步讲解Vuex的使用和最佳实践。它适合于那些对Vue.js已经有一定了解，但对状态管理还不太熟悉的开发者。通过阅读和实践这份代码，开发者将能够更加深刻理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值