什么是 vuex、如何使用 vuex ？

From：https://blog.csdn.net/m0_70477767/article/details/125155540

Vuex 官网文档：https://vuex.vuejs.org/zh/

1、Vuex 是什么

​Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式， 采用 集中式存储 管理应用的所有组件的状态，解决 多组件数据通信。
要点：

  1. vue 官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具
  2. 集中式管理数据状态方案 ( 操作更简洁 )。( 类似 data() { return { 数据, 状态 }} )
  3. 数据变化是可预测的 ( 响应式 )

使用 Vuex 的好处：

  • 1、数据的存取一步到位，不需要层层传递
  • 2、数据的流动非常清晰
  • 3、存储在Vuex中的数据都是响应式的

什么样的数据适合存储到 Vuex 中 ？

答案是：需要共享的数据。Vuex 的作用就是：频繁、大范围的数据共享

vue 官方提供的独立于组件体系之外的，管理公共数据的工具

2、vuex 五个概念

vuex 分为五个大块

  1. state： 统一定义公共数据（类似于 data(){return {a:1, b:2，xxxxxx}} ）

  2. mutations ： 使用它来修改数据 ( 类似于 methods )

  3. getters： 类似于 computed ( 计算属性，对现有的状态进行计算得到新的数据 ----- 派生 )

  4. actions： 发起异步请求

  5. modules： 模块拆分

3、在项目中安装和配置 Vuex

整体步骤：

1. 安装

它是一个独立的包，需要先安装。

进入项目目录，安装包（这里说明一下，如果是vue2的项目，那么就需要按照下面的指定版本号，如果是vue3不需要指定版本号，直接npm i vuex就可以了）

npm install vuex@3.6.2
开发依赖：npm i xxxx --save-dev ; npm i xxxx -D
生产依赖：npm i xxxx --save ; npm i xxxx -S; npm i xxxx

2. 配置

3. 创建、注入 Vuex.store 实例

  • 创建 Vuex.store 实例
  • 向 Vue 实例注入store

实例化 store。与 router 一样，当我们在项目中使用 vuex 之后，为了方便代码维护，我们一般需要做特殊的目录调整，约定的结构如下：

根组件
└── src
    ├── main.js
    ├── router
    │   └── index.js   # 路由
    └── store
        └── index.js   # vuex

在store/index.js 中放置具体的代码，具体如下：

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use(Vuex)
​
const store = new Vuex.Store({
  state(){
    return {
      // 就是公共的数据，所有的组件都可以直接使用
      count: 100
    }
  }
})
export default store

向 Vue 实例注入 store。在src/main.js中：

  • 导入store
  • 并注入Vue实例

// 省略其他
// 1. 导入store
import store from './store' 
​
new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

4. 使用 --- 在组件中使用 store

在组件中使用 store

在任意组件中，通过this.$store.state 来获取公共数据

4、Vuex-state 定义公共数据并在组件中使用

概念：State 本质上就是 Object 对象

state的作用是：保存公共数据（多组件中共用的数据）

state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。

组件访问 State 数据的第一种方式

在每个 Vue 组件中，可以通过 this.$store.state.全局数据名称 访问 Store 中的数据。

定义公共数据格式

new Vuex.store({
  state() {
    return {
       属性名： 属性值 
    }
  }
})

使用公共数据

在组件中，通过this.$store.state.属性名来访问。

在模板中，则可以省略this而直接写成： {{$store.state.属性名}}

组件访问 State 数据的第二种方式

基于 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性

小结：

  • 直接使用： this.$store.state.xxx;

  • map辅助函数：

    computed: { ...mapState(['xxx']), ...mapState({'新名字': 'xxx'})
}

5、Vuex --- 用 mutations 修改公共数据

Mutation 本质上是JavaScript 函数，专门用来变更Store 中的数据

特点：想要修改State 中的数据，只能调用Mutation 方法，它是Vuex中用来修改公共数据的唯一入口。

好处：能够确保修改来源的唯一性，方便调试和后期维护。

在定义时：它的第一个参数是state，第二个参数是载荷

在调用时：用 this.$store.commit('mutation名'， 载荷) 来调用

注意：Mutation 必须是同步函数，Mutation 里面不能放异步代码

定义格式： 如下

new Vue.store({// 省略其他...mutations：{// 每一项都是一个函数，可以声明两个形参mutation名1：function(state [, 载荷]) {},mutation名2：function(state [, 载荷]) {}}
})

每一项都是一个函数，可以声明两个形参：

  • 第一个参数是必须的，表示当前的state。在使用时不需要传入
  • 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

使用格式

this.$store.commit('mutation名', 实参)

这里的commit是固定的方法

mapMutations 辅助函数

基于 Vuex 提供的 mapMutations 辅助函数，可以方便的把 Store 中指定的方法，映射为当前组件的 methods

小结：

  • 直接使用：this.$store.commit('mutation名', 参数)

  • map辅助函数：

    methods: { ...mapMutations(['mutation名']), ...mapMutations({'新名字': 'mutation名'})
}

6、Vuex-mutaions 拓展理解

问：为啥是$store.commit('mutations的名字')而不是$store.mutations的名字()?

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

问：数据不可以该在组件内部直接修改吗？

答：不能。虽然语法上不报错，也有响应式的特点。但是不推荐。特别是在严格模式下会报错。若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作，只要不经过 mutation的函数，vue就会报错

问：可以传递多个数据吗？

答：参数只能有一个：下面的写法是不对的：

this.$store.commit('setUrl', url, host) // host这个参数将无法被接收到

如果希望传递复杂的数据，第二个参数可以是对象或者数组，例如下面的写法

this.$store.commit('setUrl', { url, host} )

问：等价写法 this.$store.commit({type: 'mutations的名字'})

7、Vuex --- 用 getters 的派生状态

作用：它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。

访问 Getter 的第一种方式

定义格式

new Vuex.store({// 省略其他...getters: {// state 就是上边定义的公共数据stategetter的名字1: function(state) {return 要返回的值}}
})

state 就是上边定义的公共数据state

使用格式

在组件中通过：$store.getters.getter的名字 来访问

访问 getter 的第二种方式

基于 mapGetters 辅助函数，可以把 store 中的 getter 映射为当前组件的计算属性。

map辅助函数：

computed: { ...mapGetters(['xxx']), ...mapGetters({'新名字': 'xxx'})
}

作用

在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

例如：计算总价

new Vuex.store({state: {books: [{"name": "技术内幕","price": 100,"img": "https://img3m7.ddimg.cn/64/26/29120617-1_u_8.jpg"},{"name": "数学","price": 44,"img": "https://img3m2.ddimg.cn/18/30/28538352-1_b_5.jpg"},{"name": "认知","price": 40,"img": "https://img3m3.ddimg.cn/74/33/1732997153-3_u_3.jpg"}]}
})

Vuex-actions --- 发异步请求

Action 本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作

actions介绍

  • actions是vuex的一个配置项
  • 作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
  • 要点：
    • action 内部可以发异步请求操作
    • action是间接修改state的：是通过调用 mutation来修改state

格式

定义格式

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

调用格式

1、直接使用：在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

2、还可以基于 Vuex 提供的 mapActions 辅助函数，可以方便的把 Store 中指定的 Action，映射为当前组件的 methods:

map辅助函数：

methods: { ...mapActions(['actions名']), ...mapActions({'新名字': 'actions名'}) }

小结

action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

将 ajax 请求放在 actions 中有两个好处：

  1. 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
  2. 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。

Vuex --- 用modules来拆分复杂业务

问题导入

所有的全局数据、方法都集中在了一起，导致 Vuex 的结构混乱，不利于现阶段的开发和后期的维护

modules的作用

拆分模板，把复杂的场景按模块来拆开

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    模块名1： {
            // namespaced为true，则在使用mutations时，就必须要加上模块名
        namespaced: true, 
          state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
    }，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
          state: {},
            getters: {},
            mutations: {},
            actions: {},
         modules: {}
    }  
  }
})

也可以进一步对文件进行拆分

|--store /
|------- index.js # 引入模块
|------- modules
|-------------- / mod1.js # 模块1
|-------------- / mod2.js # 模块2
复制代码

访问数据和修改数据的调整

  • 访问模块中的数据，要加上模块名

获取数据项：  {{$store.state.模块名.数据项名}}
获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:

  • 如果namespaced为true，则需要额外去补充模块名
  • 如果namespaced为false，则不需要额外补充模块名

$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true

小结

使用了modules之后，在访问数据时就要额外添加modules的名字了。

结论： 在使用modules时，建议都给加上namespaced!

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/495042.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IJCAI 2018所有奖项出炉：AlphaGo获奖，中国人论文占46%，华人一作近2/3

IJCAI 2018所有奖项出炉：AlphaGo获奖，中国人论文占46%，华人一作近2/3

来源：全球人工智能IJCAI（国际人工智能联合会议）是人工智能领域历史最悠久的学术会议，也是最重要和最顶级的学术会议之一。第一届IJCAI于1969年举办，是1956年达特茅斯研讨会的延伸，也是有史以来的第一次人工…
阅读更多...
VUE 超级详细教程

VUE 超级详细教程

From：https://blog.csdn.net/weixin_42371679/article/details/112408800 vue 源码阅读解析：https://zhuanlan.zhihu.com/p/419896443 深入理解vue底层原理：https://blog.csdn.net/dream2222222222/article/details/103256281 Vue 源码解读…
阅读更多...
下一代脑电图可以帮助恢复失去的大脑功能

下一代脑电图可以帮助恢复失去的大脑功能

来源：IEEE电气电子工程师学会摘要：据悉，能源部SLAC国家加速器实验室和斯坦福大学正在开发的一种装置，可以通过测量大脑对电流刺激它的疗法的反应来帮助恢复失去的大脑功能。据悉，能源部SLAC国家加速器实验室和斯坦福大…
阅读更多...
鼓吹海

鼓吹海

此时此刻，我坐在海堤上，现在有一些渔民挑着担子，陆陆续续要回去了。空气中弥漫着鲜海的味道，来风习习。夏天里夜幕将临，灰灰的集美大桥上，有来来往往亮着尾巴的方盒子，有的高，有的矮…
阅读更多...
2018人工智能行业创新情报白皮书

2018人工智能行业创新情报白皮书

来源：PatSnap人工智能的定义非常广泛，随着时间的推进，文公智能也将不断进化，但其本质是机器模拟人类思考行为的能力。虽然人工智能经常被分作计算机 科学的一个分支，事实上智能站在自然科学和社会科学的交叉路口&#…
阅读更多...
前沿|Google AI提新型神经网络，对神经元进行高精度自动重建

前沿|Google AI提新型神经网络，对神经元进行高精度自动重建

来源：AI科技大本营7 月 16 日， Google AI 发布了一篇博客称，Google Research 部门和 Max Planck 研究所合作提出了一种新型的递归神经网络，它可以提升连接组数据进行自动分析的准确性，相比先前深度学习技术的准确性是数…
阅读更多...
机器传奇：全球13位科学家和他们的机器人“孩子”

机器传奇：全球13位科学家和他们的机器人“孩子”

来源：资本实验室摘要：自古以来，人们就幻想使用自动化机械来替代人类进行某项工作，中国、希腊和罗马都有关于自动化机械的传说或历史记载。聚焦前沿科技创新与传统产业升级自古以来，人们就幻想使用自动化机械来替代人类…
阅读更多...
使用delphi 开发多层应用（十三）使用Basic4android 直接访问kbmMW server

使用delphi 开发多层应用（十三）使用Basic4android 直接访问kbmMW server

由于目前delphi xe2 还不直接支持Android 的开发，因此kbmMW 客户端的功能也没办法直接在Android 上运行。 由于kbmMW 为了与java 应用程序通讯，在企业版里面提供了一个JavaClinet. 具体文件名为kbmMWClient.jar。 而在basci4android 可以直接使用这个jar…
阅读更多...
赛灵思收购深鉴科技：收购额或将3-4亿美元 A轮投资方变收购方

赛灵思收购深鉴科技：收购额或将3-4亿美元 A轮投资方变收购方

来源：声学在线继去年5月宣布投资中国AI初创企业深鉴科技后，自适应和智能计算企业赛灵思公司Xilinx今日宣布已经完成对深鉴科技的收购。官方消息并未对外披露此次的具体交易财务条款。不过，据业内人士对声学在线透露，此次赛灵思收购…
阅读更多...
探Button控件的Click事件发生始末

探Button控件的Click事件发生始末

先贴结果图&#xff1a; 点击后&#xff1a; 页面代码&#xff1a; <html xmlns"http://www.w3.org/1999/xhtml"> <head runat"server"><title></title> </head> <body><form id"form1" runat"serv…
阅读更多...
AI大神Yann LeCun谈近期AI发展：最聪明的AI在常识方面还不如猫

AI大神Yann LeCun谈近期AI发展：最聪明的AI在常识方面还不如猫

来源&#xff1a;网易智能摘要&#xff1a;从虚拟助手到巨大的商业效益&#xff0c;人工智能正在重塑信息时代&#xff0c;作为著名的人工智能先驱者之一&#xff0c;Yann LeCun又是怎么看待这一领域的发展、近期的变化和潜力的呢&#xff1f;从虚拟助手到巨大的商业效益&#…
阅读更多...
美科学基金会欲向公众征集想法

美科学基金会欲向公众征集想法

来源&#xff1a;中国科学报你有个或许会改变世界的点子&#xff1f;美国国家科学基金会&#xff08;NSF&#xff09;洗耳恭听。这个位于弗吉尼亚州亚历山大市、拥有78亿美元经费的研究机构已从科学家那里获得了很多好的研究计划。虽然这已经超出了其能资助的范围&#xff0c;但…
阅读更多...
解决i9001WiFi频繁断线

解决i9001WiFi频繁断线

去年年底入手Galaxy S Plus&#xff0c;玩安卓快半年时间&#xff0c;最近为了方便使用Airdroid对手机进行管理&#xff0c;在路由器中设置了IP和MAC绑定&#xff0c;却发现每隔大约1分钟或者更短时间&#xff0c;WiFi连接就会自动断开&#xff0c;求助Google&#xff0c;有一位…
阅读更多...
专家把脉，深入分析八种前景看好的物联网业务形态

专家把脉，深入分析八种前景看好的物联网业务形态

来源&#xff1a;通信世界全媒体摘要&#xff1a;物联网将会为经济带来新动力&#xff0c;对社会带来新变革&#xff0c;它的业务形态也在发展变化。未来随着更多成熟的业务场景的出现&#xff0c;会演变出更多有前景的应用形态&#xff0c;也会带来更多的市场机会。万物互联是…
阅读更多...
人工智能产业的发展是什么样的呢？

人工智能产业的发展是什么样的呢？

来源&#xff1a;人工智能大健康引领AI产业发展的技术竞赛&#xff0c;主要是巨头之间的角力。由于AI产业核心技术和资源掌握在巨头企业手里&#xff0c;而巨头企业在产业中的资源和布局&#xff0c;都是创业公司所无法比拟的&#xff0c;所以巨头引领着AI发展。目前&#xff0…
阅读更多...
个性化推荐

个性化推荐

“探索推荐引擎内部的秘密”系列将带领读者从浅入深的学习探索推荐引擎的机制&#xff0c;实现方法&#xff0c;其中还涉及一些基本的优化方法&#xff0c;例如聚类和分类的应用。同时在理论讲解的基础上&#xff0c;还会结合 Apache Mahout 介绍如何在大规模数据上实现各种推荐…
阅读更多...
报告 | 从20世纪70年代至今，自动驾驶汽车的发展经历了哪些历史性的变革？

报告 | 从20世纪70年代至今，自动驾驶汽车的发展经历了哪些历史性的变革？

来源&#xff1a;学术头条摘要&#xff1a;当今&#xff0c;无人驾驶技术已经成为整个汽车产业的最新发展方向。科研院校、汽车制造厂商、科技公司、无人驾驶汽车创业公司以及汽车零部件供应商在无人驾驶技术领域进行不断地探索。今天我们为大家梳理一下无人驾驶汽车的国内外发…
阅读更多...
访问List的itemRenderer的组件中定义的方法

访问List的itemRenderer的组件中定义的方法

主程序文件List1.mxml: 1 <?xml version"1.0" encoding"utf-8" ?>2 <mx:Application xmlns:mx"http://www.adobe.com/2006/mxml">3 <mx:Style>4 Application5 {6 font-size:12px;7 }8 </mx:Style>…
阅读更多...
量子力学工具箱再添利器—科学家提出高效驱动微型引擎概念

量子力学工具箱再添利器—科学家提出高效驱动微型引擎概念

把球推上山坡需要能量。量子引擎或能通过反复测量实现同样的工作。来源&#xff1a;中国科学报要测量一个原子&#xff0c;不可能不扰动它&#xff0c;至少根据量子力学是这样的。但两名物理学家报告称&#xff0c;这一效应似乎有点麻烦&#xff0c;但它可以驱动一个微型引擎以…
阅读更多...
人工智能离不开它——贝叶斯公式的前世今生

人工智能离不开它——贝叶斯公式的前世今生

来源&#xff1a;图灵人工智能摘要&#xff1a;人工智能、无人驾驶、语音图片识别与大数据有什么关系&#xff1f;海难空难如何搜救&#xff1f;垃圾短信、垃圾邮件如何识别&#xff1f;这些看起来彼此不相关的领域之间会有什么联系吗&#xff1f;答案是&#xff0c;它们都会用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023