一文吃透 Vue全家桶之Vuex。

已于 2023-03-21 09:57:53 修改
阅读量1.2k 收藏 2
点赞数 2
分类专栏： Pinia 文章标签： vue.js 前端 javascript 前端框架
于 2022-10-31 08:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60961397/article/details/127608214
版权

文章目录

一、Vuex是什么？

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

二、Vue的状态管理模式，是围绕着三个概念展开监视的

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

以下是一个表示“单向数据流”理念的简单示意：
状态管理模式概念图

但是上面这种单向数据流在一些特定条件下，也会表现出劣势；
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：以及需要以下需求时

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

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

所以为了应对以上问题，Vuex就诞生了

三 、什么情况下需要使用 Vuex？

官方描述：Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

Vuex 的Api 文档流程图：
在这里插入图片描述

四、安装配置Vuex

1.安装Vuex

npm install vuex@next --save

2.应用Vuex

import Vue from 'vue'
import Vuex from 'vuex'   //引入Vuex
Vue.use(Vuex);          //  应用Vuex到Vue实例上

3.创建 store（仓库）, 并把store 暴露出去

const store = new Vuex.Store({
   //这里面配置托管的数据状态
})
export default store;

4.在main.js中导入store，并将store 挂载到Vue实例身上

import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

五、Vuex 五个核心概念

State （初始化状态）

1.初始化创建 State


//直接定义一个 store ，store 是一个对象
let state = {
  numberdata: 0
}

const store = new Vuex.Store({
//并把state 挂载给store 进行集中管理
  state,
})
export default store;

2.读取 State 中的数据

 <h1>{{ daname }}</h1>   //使用计算属性
 <h1>{{ $store.state.numberdata }}</h1>   //  使用插值语法直接从store 身上读取

<script>
export default {
    computed: {
        daname() {   //使用计算属性代理接收
            return this.$store.state.numberdata;
        },
    },
};
</script>

3.mapState 【辅助函数】

目的：简短缩写 ，插值语法拿取 state 中的代码

mapState （对象写法）
 <h1>{{ sum}}</h1>  
 <h1>{{ name}}</h1>  
<script>
import { mapState } from "vuex";
export default {
    computed: {
          //这是我们自己定义使用计算属性代理接收，但是当数据过多时，拿取依然会显得劣势
          //daname() { 
          //       return this.$store.state.numberdata;
          // },

          ...mapState({  //mapState调用传入一个对象，对象的  key  就是需要用到到属性名，value就是与之对应的 state 中的属性，类型是String。
            sum: "numberdata",
            name: "dataname",
        }), 
    },
};
</script>
mapState （数组写法）
 <h1>{{ dataname}}</h1>  
 <h1>{{ numberdata}}</h1>  
<script>
import { mapState } from "vuex";
export default {
    computed: {
       ...mapState(["dataname", "numberdata"]),   //当我们想要用到的属性名 与 state 中的属性名，完全一致时，就可以更简化一点，调用写成数组的形式。
    },
};
</script>

Action （分发事件请求）

作用：用来处理改变数据状态前，对数据的状态筛选判断，以及开启异步任务的中转站。

组件中触发：

 methods: {
        add() {  //事件中通过  $store.dispatch 触发 Action ，参数一为，要触发的 Action 中对应的事件名，参数二，为携带的参数
            this.$store.dispatch("increase", 123);
        },
    },

描述

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

let actions = {
  increase(context , datnum) {    //接收两个参数   datnum 为接收的参数。
    mentet.commit("ADD", datnum);
  }
    // setTimeout(() => {       在actions 中开启异步任务
    //   mentet.commit("ADD", datnum)
    // }, 5000)
}
const store = new Vuex.Store({   //同样需要把 actions 挂载到 store 上进行管理
  state,
  actions,
})

mapActions【辅助函数】

通过 mapActions 把 Actions 中的函数 映射到 methods 中，，详情可见下 mapMutations 同理！

   
  methods: {
   add(){  //默认写法
       this.$store.dispatch("increase",123)
      }
  ...mapActions(["increase"]),  //数组映射写法
  ...mapActions({ add: "increase" }),  //对象映射写法，
  },

Mutation （操作，更改状态）

触发方式

let actions = {
  increase(context , datnum) {   
    context.commit("ADD", datnum);  // 在 actions 通过参数一 身上的  commit 触发
  }
    // setTimeout(() => {       
    //   mentet.commit("ADD", datnum)
    // }, 5000)
}

组件中

  methods: {    //也可以在组件中，直接触发  Mutation 
        add() {
            this.$store.commit("ADD", this.num);
        },
    },

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

let mutations = {     
  ADD(a, b) {     //定义操作更改数据的具体方法(函数)  接受 state 作为第一个参数，参数一 可以直接拿到store 身上的数据，
    a.numberdata += b;
  }
}
const store = new Vuex.Store({  //同样需要把 mutations 挂载到 store 上进行管理 mutations 
  state,
  actions,
  mutations,
})

mapMutations 【辅助函数】

说明：如果在 Action 中没有业务逻辑处理，则可以不需要在 Action 中触发 mutations ，可以在组件中，直接触发对话 mutations ，把 mutations 中的函数，映射到 methods中

<button @click="add(100)">+</button>
<button @click="ADD(100)">+</button>
<button @click="newsum(100)">+</button>
methods: {    
      add() {   //默认写法
          this.$store.commit("ADD", this.num); //在组件中，直接触发  Mutation 
      },
      //mapMutations 数组 写法
    ...mapMutations(["ADD"]);  //可以通过  mapMutations 自动生成回调，使用数组 写法时，需保证 指定 事件名，和 Mutation 中的关联事件名一致。
    // 对象写法，key 为 指定事件名，value 为 关联事件名。  mapMutations  生成事件身上，默认可以接收一个参数，在调用事件时，可以传递参数。
    ...mapMutations({
            newsum: "ADD",
        }),
  },

注意：如果在 mutations 中 更改数据时，用到了，外部传入的值， 那么在 mapMutations 生成的事件 调用时，必须要传入一个值，不然会把一个事件对象当成参数传递过去。

Getter （数据处理加工）

getters 的作用

当需要对store 中的数据进行加工处理时，可以使用 getters 可以认为是 store 的计算属性

let getters = {
  machining(state) {   //Getter 接受 state 作为其第一个参数
    return state.numberdata * 100;    //返回被处理过后的数据。
  }
}

const store = new Vuex.Store({    
  state,
  actions,
  mutations,
  getters,             //挂载到 store
})

组件中读取数据时

 <h1>{{ $store.getters.machining}}</h1>

mapGetters

同上， mapGetters 使用和 mapState 同理

Module （模块化）

概述：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

分离模块化

将 State, Actions, Mutations, Getters 按照不同的业务分类，给分别抽离出去，为了防止，多模块之间的状态污染，需要在自己对应的状态中，开启一个命名空间

export default {
    namespaced: true,  //开启命名空间
    state: {
        numberdata: 0,
        dataname: "store中的数据"
    },
    actions: {
        increase(mentet, datnum) {
            mentet.commit("ADD", datnum)
        }
    },
    mutations: {
        ADD(a, b) {
            a.numberdata += b;
        }
    },
    getters: {
        machining(state) {
            return state.numberdata * 100;
        }
    },
}

配置模块化

import Vue from 'vue'
import Vuex from 'vuex'
import Case from './modules/case';//再引入抽离出去的状态，
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {                 //并把引入的 状态放到  modules下，进行 模块化托管
    Case
  }
})
export default store

页面中使用模块化


//方法一：在 mapState, mapActions, mapMutations, mapGetters ，方法调用中，第一个参数，就可以指定，我们需要访问哪个模块下的数据状态，为String 
<script>  
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
    computed: {
        ...mapState("Case", {
            sum: "numberdata",
            name: "dataname",
        }),
        ...mapState("Case", ["dataname", "numberdata"]),
        ...mapGetters("Case", ["machining"]),
    },
    methods: {
        ...mapActions("Case", ["increase"]),
        ...mapActions("Case", { add: "increase" }),

        ...mapMutations("Case", {
            newsum: "ADD",
        }),
    },
};
</script>

<script>
//使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations, mapGetters } =
    createNamespacedHelpers("Case");  //createNamespacedHelpers 函数调用，传入一个参数用来指定绑定哪个模块，然后能从返回值身上结构，拿到指定当前模块下的，辅助函数，

export default {
    computed: {
        ...mapState({   //同理，由于 使用了 createNamespacedHelpers ，所以这里的，辅助函数，不用再传入第一个，指定模块参数了。
            sum: "numberdata",
            name: "dataname",
        }),
        ...mapState(["dataname", "numberdata"]),
        ...mapGetters(["machining"]),
    },
    methods: {
        ...mapActions(["increase"]),
        ...mapActions({ add: "increase" }),

        ...mapMutations({
            newsum: "ADD",
        }),
    },
};
</script>

补充：

开启模块化+命名空间后，在组件中如果不使用辅助函数，用默认方式读取，修改状态时，有些许变化。

  computed: {
        sum(){    // 读取 模块下的state 中的数据
            return this.$store.state.Case.numberdata
        },
         name() {  //读取getters 中的数据
            return this.$store.getters["Case/machining"];
        },
    },
    methods: {
        newsum() {    //触发 actions
            this.$store.dispatch("Case/increase", 300);
        },
        add() {       //触发 mutations
            this.$store.commit("Case/ADD", 700);
        },
    },

总结

其实 Vuex 一直都在围绕着 数据的 “共享” 一词展开，官方的 api 封装 已较完善；官方也比较推荐模块化开发，使得代码可维护性大大提高。

旧梦星轨
关注
专栏目录
vue全家桶之vuex数据状态管理
m0_62371650的博客
09-24 1325
vue全家桶之vuex数据状态管理
对vuex和浏览器本地存储的简单了解
s1300352164的博客
12-28 1082
一：vuex 一：vuex的五大核心属性 state：用于存放数据/状态的。 getters：vuex的计算属性 mutations：唯一改变state数据的工具 actions：异步操作，需要经过mutations内 来改变 state module：模块化 二：调用方法 获取 state内的数据 ￥store.state. 调用mutat...
第17章 前端之全局存储：Vuex=Store
zhoujian_911的专栏
12-17 1244
第17章 前端之全局存储：Vuex=Store Store用于对数据进行存储，并共享以为所有需要的Vue页面中的调用提供数据及其方法支撑；Vuex是Store的内置引用包，即如果想要前端Vue程序支撑Store必须在新建Vue程序；如果Vue程序没有引用Vuex包则，在Vue程序引用Vuex包。 1 定义src\store\index.js import { createStore } from 'vuex' export default createStore({ state: {
Vuex看这一篇就够了
最新发布
大学生小郑的博客
07-23 1016
Vuex看这一篇就够了
关于vuex页面刷新后保存数据安全问题
weixin_45428927的博客
11-29 649
问题描述 在做一个vue单页面项目是，我们通常会将公有数据存储在vuex里，但在页面刷新的时候，vuex里state的数据会重置，所以我们采用的方法通常是先将数据放到 localstorage 或 sessionstorage 里，当页面刷新后，在beforeCreate生命周期里重新赋值，问题来了，localstorage 或 sessionstorage的值是可以改变的，当页面刷新后，它改变的...
vuex和sessionstorage的区别
chengzi_jiaotang的博客
11-10 1109
下面看戏vuex存储和本地存储(localstorage、sessionstorage)的区别 1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地 2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。 3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。 注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一
Vuex开发环境的严格模式-避免state被意外篡改
aliven1的博客
10-20 214
vuex开发环境的严格模式
Vue全家桶之Vuex实例代码
12-27
在这个“Vue全家桶之Vuex实例代码”中，我们将探讨Vuex的核心概念以及如何通过实际代码来理解它们。首先，Vuex由几个核心概念组成：state、mutations、actions、getters 和 modules。 1. **State**：状态是Vuex中的...
Vue全家桶(vue-router+vuex)
06-21
其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现...
14_Vue全家桶 - Vuex状态管理.pptx
01-25
Vuex状态管理是Vue全家桶中的一部分，主要用于管理应用程序中的状态。状态管理是指在应用程序中管理数据的过程，这些数据可能来自服务器返回的数据、缓存数据、用户操作产生的数据等等。随着应用程序的复杂化，状态...
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
尚硅谷提供的"Vue全家桶"教程涵盖了Vue的核心概念、组件化开发、路由、状态管理等多个方面，旨在帮助开发者全面掌握Vue.js技术栈。在这个压缩包中，包含了一个名为"尚硅谷_Vue全家桶.pdf"的文件，它很可能是详细的...
sinai:受Vuex启发的类型安全状态管理
05-14
西奈 输入受Vuex启发的安全状态管理。 该库包含许多类型级别的技巧。 使用时需要您自担风险，如果不确定发动机罩下的机械装置，请不要使用。 如果您搜索生产就绪状态管理解决方案，请查看 要求 Vue> = 2.5 打字稿> = 2.8 例子 import { store as createStore , module , Getters , Mutations , Actions } from 'sinai' // Declare the module state and its initial value class CounterState { count = 0 } // Declare getters class CounterGetters extends Getters < CounterState> ( ) { get half ( ) { retur
Vuex状态持久化
weixin_45610518的博客
11-24 1071
theme: qklhk-chocolate highlight: atelier-cave-light 描述 Vuex用于处理组件之间通信以及状态管理的问题; Vuex本质上就是一个保存在内存中的对象，存在的问题就是当页面刷新后该对象就会被重新初始化; 之前存的数据就拿不到了，于是在使用这些数据的地方就可能发生报错; 解决的方法就是把state中的数据做一个持久化存储或者说备份; 一般就存在localStorage、sessionStorage或者cookies中; 这里以localStorage为例.
解决vuex在页面刷新后数据被清除的问题
热门推荐
lulula的博客
02-07 3万+
1.原因 2.解决方法 localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度 我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面
vue2.0之vuex—公用数据使用管理
黄孝果的博客
04-04 7055
一、vuex初体验 vuex引入 npm install vuex --save 在package.json出现vuex，表示安装成功 初步使用，构建公用数据存储 新建vuex文件夹和store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // 声明一个常量 const...
vuex交互要用vuex嘛_使vuex更具类型安全性的助手
cuk5340的博客
07-27 112
vuex交互要用vuex嘛 Vuex型脚本FSA (vuex-typescript-fsa) The helper function for inferring a combination of action/mutation and handler. 用于推断动作/变异和处理程序组合的辅助函数。 安装 (Installation) npm install vuex-typescript-f...
什么是vuex？五大核心？如何调用vuex里面的属性和方法？vuex的弊端？如何解决？
前端泡面人
07-01 2427
什么是vuex?vuex的五大核心？如何使用vuex的五大核心？项目过程中我们应该怎么做？
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
vuex使用中需要注意的点
weixin_33770878的博客
06-15 375
vuex中几个核心概念: state, getters, mutations, actions, module getters 可以认为是store的计算属性;与计算属性一样,getter的返回值会根据它的依赖缓存起来,且只有当它的依赖值发生变化才会被重新计算 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到...
Vue全家桶实现权限控制：vue、vue-router、vuex与动态路由
"基于vue,vue-router和vuex的权限控制实现教程，代码示例可在GitHub仓库https://github.com/linrunzheng/vue-permission-control找到。教程详细讲解了一个普通用户从登录到权限控制的全流程。" 在Vue.js应用程序中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旧梦星轨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值