Vuex-状态管理模式

news2024/11/15 9:04:29

Vuex

Vuex 是一个专为 Vue.js 开发的状态管理模式。主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),页面多并且一层嵌套一层的传值,非常麻烦,这个时候我们就用vuex来维护共有的状态或数据。
vuex一共有五大核心概念
1.state: 用来定义数据的(相当于data),在页面中用获取定义的数据用:

this.$store.state.变量名
  1. getters:计算属性(相当于vue中的computed),依赖于缓存,只有缓存中的数据发生变化才会重新计算。getters中的方法接收一个state对象作为参数。
如:
state:{
	count: 1
},
getters:{ 
     getCount(state) {
         return state.count + 1
     }
  },

在页面中获取用:

this.$store.getters.getCount
<h2>{{this.$store.getters.getCount}}</h2>
  1. mutations:是修改 state 值的唯一方法,它只能是同步操作
    在页面中获取用:
this.$store.commit("方法名")

//可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)
store.commit('increment', 10)
// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

  1. actions:提交的是 mutations,而不是直接变更状态,它可以包含任意异步操作
    在这里插入图片描述

  2. modules: 模块,Vuex允许将store分割成模块,每个模块都拥有自己的state,getters,mutations,actions,甚至嵌套模块。可以避免变量名相同而导致程序出现问题。

const moduleA = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

const moduleB = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

// 在各自的模块内部使用
state.price // 这种使用方式和单个使用方式一样,直接使用就行

//在组件中使用
store.state.a.price // 先找到模块的名字,再去调用属性
store.state.b.price // 先找到模块的名字,再去调用属性

使用:

安装vuex:

npm install --save vuex

配置vuex

在src文件夹下新增一个store文件夹,里面添加一个index.js文件
在这里插入图片描述

然后在main.js中引入store文件下的index.js

// main.js内部对vuex的配置
import store from '@/store/index.js' 
new Vue({
    el: '#app',
    store, // 将store暴露出来
    template: '<App></App>',
    components: { App }
});

之后我们开始进行store文件下的index.js配置

import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) 

export default new Vuex.Store({
    state: { 
        // state 类似 data
        //这里面写入数据
    },
    getters:{ 
        // getters 类似 computed 
        // 在这里面写个方法
    },
    mutations:{ 
        // mutations 类似methods
        // 写方法对数据做出更改(同步操作)
    },
    actions:{
        // actions 类似methods
        // 写方法对数据做出更改(异步操作)
    }
})

举例:
在store中定义商品的原价,计算折扣价,根据用户输入的数量和商品原价计算出总价
【1】我们约定store中的数据是以下形式

import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) 

export default new Vuex.Store({
    state: { 
        price: 100, // 原价
        total: '',  // 总价
    },
    getters:{ 
        // 折扣价
        discount(state, getters) {
            return state.price*0.8
        }
    },
    mutations:{ 
        // 计算总价:第一个参数为默认参数state, 后面的参数为页面操作传过来的参数
        getTotal(state, n) {
            return  state.total = state.price * n;
        }
    },
    actions:{
        // 这里主要是操作异步操作的,使用起来几乎和mutations方法一模一样
        // 除了一个是同步操作,一个是异步操作,一个使用commit调用,一个使用dispatch调用
        // 这里就不多介绍了,有兴趣的可以自己去试一试,
        // 比如你可以用setTimeout去尝试一下
    }
})

【2】在页面中使用store中的数据


```javascript
<template>
  <div>
    <p>原价:{{price}}</p>
    <p>8折:{{discount}}</p>
    <p>数量:<input type="text" v-model="quantity"></p>
    <p>总价:{{total}}</p>
    <button @click="getTotal">计算总价</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        quantity: 0,
      }
    },
    computed: {
      price() {
        return this.$store.state.price
      },
      discount() {
        return this.$store.getters.discount
      },
      total() {
        return this.$store.state.total
      }
    },
    mounted() {

    },
    methods: {
      getTotal() {
        this.$store.commit('getTotal', this.quantity)
      }
    },
  }
</script>

【3】页面效果
在这里插入图片描述
再举例应用场景:
比如登录页面,既可以用手机号验证码登录,也可以用手机号密码登录,进行切换的时候想保留输入的手机号码,这个时候我们可以用vuex。

页面刷新数据丢失问题:

vuex存储的数据作为全局的共享数据,是保存在运行内存中的,当页面刷新时,会重新加载vue实例,vuex里的数据会重新初始化,从而导致数据丢失。
怎么解决?
直接在vuex修改数据方法中将数据存储到浏览器缓存中(sessionStorage、localStorage、cookie)

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store{
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          s.orderList= d;
          window.localStorage.setItem("list",jsON.stringify(s.orderList))
        },  
        menuList(s, d) {
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       },
   }
}

在页面加载时再从本地存储中取出并赋给vuex

if (window.localStorage.getItem("list") ) {
        this.$store.replaceState(Object.assign({}, 
        this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

函数数组的运算

函数数组的运算 一&#xff1a;冒泡运算 类似气泡上涌的动作&#xff0c;会将数据在数组中从小到大或者从大到小不断的向前移动。 基本思想&#xff1a; 冒泡排序的基本思想是对比相邻的两个元素值&#xff0c;如果满足条件就交换元素值&#xff0c;把较小的元素移动到数组前…

D31FBE01EC1NF00PARKER比例方向阀

D31FBE01EC1NF00PARKER比例方向阀是宁波秉圣工业&#xff0c;美国派克比例阀主要具有方向功能&#xff0c;流量功能&#xff0c;压力功能&#xff0c;因此主要有三类&#xff1a;方向阀&#xff0c;流量阀&#xff0c;压力阀&#xff0c;其中方向阀和压力阀直接控制和操作你。被…

一起来!白嫖Amazon DynamoDB!!!

Amazon DynamoDB简介 Amazon DynamoDB是由Amazon Web Services&#xff08;AWS&#xff09;提供的一种快速、灵活、全托管的NoSQL数据库服务&#xff0c;支持文档和键/值数据模型。它具有自动扩展、低延迟、高可靠性、高吞吐量等特点&#xff0c;能够处理从几个字节到几TB的数…

tiechui_lesson08_内存的分配和链表

主要是将链表结构的使用&#xff0c;在内核开发中使用起来比较方便的一种数据结构【LIST_ENTRY】。 一、内存的分配 主要是学习一些基本操作。现在推荐使用的动态分配函数【ExAllocatePoolWithTag】 PVOID tempbuffer ExAllocatePoolWithTag(NonPagedPool, 0x1000, xxaa); …

DJ4-6 层次选路

目录 一、层次选路的基本概念 二、域内路由选择 1、RIP* 2、OSPF 三、域间路由选择 BGP 1、AS 互连 2、AS 域间选路任务 3、示例&#xff1a;在 1d 上设置转发表 4、示例&#xff1a;在多个 AS 中做出选择 5、BGP 会话与通告 6、传播可达信息 7、路径属性和 BGP 路…

马蹄集第四期oj

目录 供水管线 黑客小码哥 逆序 来给单词分类 前k小数&#xff08;进阶&#xff09; 前K小数 线段树 队列安排 一元多项式的加法 快排变形 供水管线 难度&#xff1a;钻石 0时间限制&#xff1a;1秒 巴占用内存&#xff1a;128M 在个城市之间原本要规划修建许多条下水管道…

提高开发团队能力 这4点很重要

组建开发团队&#xff0c;提高开发团队能力的前提是需要选对人&#xff0c;不仅需与专业匹配&#xff0c;与公司文化相匹配&#xff0c;更与管理者相匹配。 而团队能力的提升需要重点关注&#xff1a;流程化&#xff0c;标准化、工具化和持续赋能。尤其通过流程化、标准化和工具…

TIM输入捕获-STM32

TIM输入捕获-STM32 IC(Input Capture) 输入捕获 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存到CCR中&#xff0c;可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数 每个高级定时器和通用定时器都拥有4个输入捕…

Unity 自建package包流程

目录 1.在工程Asset 同级目录下创建文件夹 名字随便起 2.在文件夹中添加package.json 文件 3.在unity中选中PackageManager 4.打开vs 新建一个项目 5.开始编写代码 6.修改dll路径 7.打个dll 1.在工程Asset 同级目录下创建文件夹 名字随便起 eg: 2.在文件夹中添加package…

《MySQL 必知必会》课程笔记(三)

怎么创建和修改数据表&#xff1f; 创建和修改数据表&#xff0c;是数据存储过程中的重要⼀环。我们不仅需要把表创建出来&#xff0c;还需要正确地设置限定条件&#xff0c;这样才能确保数据的一致性和完整性。同时&#xff0c;表中的数据会随着业务需求的变化而变化&#xf…

docker ngxin

安装docker环境 官方安装 官方安装 Install Docker Engine on CentOS | Docker Documentation sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repoyum install docker-ce docker-ce-cli container…

在滴滴和字节跳动划水4年,过于真实了...

先简单交代一下吧&#xff0c;沅哥是某不知名211的本硕&#xff0c;18年毕业加入滴滴&#xff0c;之后跳槽到了头条&#xff0c;一直从事测试开发相关的工作。之前没有实习经历&#xff0c;算是四年半的工作经验吧。 这四年半之间他完成了一次晋升&#xff0c;换了一家公司&am…

你有了一套采购系统,就数字化转型了吗?

我觉得完全没有达到&#xff0c;我们觉得要把这个系统要应用起来&#xff0c;用得好才能够说明你这个系统真正地做了数字化转型的。 甄云作为采购数字化服务商&#xff0c;在服务客户时&#xff0c;深有感触。 流程断点&#xff0c;但没有充分采购数字化价值 我这边讲一个故事…

Python系列之Linux 安装

目录 一、认识Python 1.1 为什么要学python ? 1.2 Python优点 1.3 Python应用场景 二、源码安装 三、RPM安装 一、认识Python 1.1 为什么要学python ? python的哲学: 明确,优雅,简单 python更强大&#xff0c;执行效率比shell高。 python可以跨平台&#xff0c;可移…

计算机网络的三种交换方式

1.计算机网络的三种交换方式 声明&#xff1a;该学习笔记来自湖科大教书匠&#xff0c;笔记仅做学习参考 个人理解&#xff1a;交换&#xff08;Switch&#xff09;可以理解为切换开关&#xff0c;将交换机中某两个开关打开&#xff0c;使得连接此两个开关的双方建立通信通道 如…

VolSDF

Volume Rendering of Neural Implicit Surfaces&#xff08;VolSDF&#xff09;&#xff1a;神经隐式曲面的体渲染 摘要&#xff1a;一个神经隐式表面体积渲染框架&#xff0c;将体积密度建模为几何形状的函数来实现表面重建。定义的体积密度函数作为拉普拉斯的累积分布函数&am…

git 解决 “fatal: Could not read from remote repository.“

现象 在使用Git将本地仓库推送到远程仓库的时候&#xff0c;发生了如下错误&#xff1a;“fatal: Could not read from remote repository.” 原因 出现这错误一般是以下两种原因&#xff1a; 客户端与服务端未生成 ssh key客户端与服务端的ssh key不匹配 为解决以上问题&a…

斯坦福2023【FrugalGPT】减少大模型的商业化应用成本

文章目录 主要解决问题采用什么方法Prompt adaptationLLM approximationLLM cascade 实验结论讨论与展望 FrugalGPT: How to Use Large Language Models While Reducing Cost and Improving Performance 主要解决问题 这篇文章主要是要解决如何降低调用大语言模型的成本(Chat…

NMOS双向转换电路实测以及上升沿尖峰处理

NMOS双向转换电路实测以及上升沿尖峰处理 NMOS双向转换电路 &#x1f527;采用的是5V供电的STC8H单片机输出PWM波形&#xff0c;经过上面的电平转换电路测量低压端的波形。 ✨在做3.3V <>5V 电平转换电路方案验证时&#xff0c;输入5V PWM波形和输出波形的波形上升沿有尖…

[Java基础练习-002]综合应用(基础进阶),如果你会做,那说明你java入门了,

本篇的练习是一个综合性的练习&#xff0c;结合了各个知识点&#xff0c;比如选择结构、循环结构、数组等java基础知识。综合性运用比较强。 目录 1、进阶练习一、学习网站&#xff08;主要考察选择结构、输入语句&#xff09; 2、进阶练习二&#xff08;选择结构、循环&#…