文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vuex状态管理数据状态查询与更改的方法

2023-06-30 00:58

关注

本篇内容介绍了“vuex状态管理数据状态查询与更改的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

状态管理数据状态查询与更改

1.main.js里引入状态管理

import store from './store' new Vue({  el: '#app',  router,  store,  components: { App },  template: '<App/>'})

2.store的创建

import Vue from 'vue'import Vuex from 'vuex'import errorLog from './modules/user'const getters={name: state => state.user.name,}

Vue.use(Vuex)

const store = new Vuex.Store({  modules: {    user  },  getters})export default store

user.js里的内容,只定义了一个修改store里name的方法。

由于vuex中store的改变唯一的途径是提交mutation,通过调用实例化后的vuex,mutations中相对应的方法可以实现对状态值的改变,其中name可以为参数对象,或者单个值,state参数在调用时默认为第一个参数可以不传,但是在mutations中申明该函数时必须传入state

  mutations: {    SET_NAME: (state, name) => {      state.name = name    }  }export default user

在子组件中通过this.$store.state.变量名在子组件中访问state中某个变量的值

this.user.name = this.$store.state.name //这里的name为存储在vuex中state的变量名

在子组件中通过this.$store.commit(&lsquo;方法名&rsquo;,参数)来进行对vuex中的数据状态进行更新/插入

//在子组件中更新store中的状态 this.$store.commit("name",userName)//其中userName为传入的参数

vuex数据管理,组件数据一一对应

vuex状态管理数据状态查询与更改的方法

需求:我们点击拍照后将拍好的照片放入vuex的state里面管理,给其他的组件调用(此处以组件A,和组件B命名)

1.组件A:我们拿到图片数据源

并且在点击拍照的同时创建一个当前时间,将图片源和时间以对象的形式提交vuex。

var url = canvas.toDataURL();var date=new Date().toLocaleTimeString()this.$store.commit("canvass", {url,date});

2. vuex(首先要记得下载和安装vuex,此处省略)

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); var state={   //要设置的全局访问的state对象     canvass:[]//图片和时间保存在这   };    var getters = {   //实时监听state值的变化(最新状态)    getCanvass(state) {  //承载变化的getCanvass的值 ,给组件B调用       return state.canvass    }};var mutations = {    canvass(state,datalist){  //组件A提交过来的数据,给到canvass中保存        state.canvass.unshift(datalist)    }}; var actions = { };  var store = new Vuex.Store({       state,       getters,       mutations,       actions});export default store;

3.组件B

html

<!-- 时间 --><ul class="row1">  <li    v-for="i in imglist"    :key="i.url"    @click="doImg(i.url)" //将循环到的图片数据存入组件的数组中,方便时间和图片一一对应    class="infinite-list-item"  >    <el-button size="small">{{ i.date }}</el-button>  </li></ul><!-- 当imglist数组中有数据的时候渲染imglist中的数据,当用户点击按钮的时候显示url数组中的数据 --><!-- 图片 v-if判断当imglist.length>0也就是最少有一条数据的时候才渲染该dom --><img :src="flag?imglist[0].url: url" class="image" v-if="imglist.length>0" />

vue

data() {    return {      imglist: [], //默认的图片时间数据      url: [], //点击按钮后对应的图片时间数据      flag:true    };  },  created() {    this.imglist = this.$store.getters.getCanvass; //拿到vuex中getters中的canvass数据  } methods: {    doImg(url) {      this.url = url.split("???"); //点击按钮后将图片时间数据保存到当前最近的url数组中      this.flag=false    } }

大致效果

vuex状态管理数据状态查询与更改的方法

这样当我们没有进行拍照进入该页面的时候是空白显示,当然我们进行拍照了之后进入该页面,默认显示最新拍的哪一张,在组件A拍照了几张照片组件B就会显示几个时间点,点击不同的时间点右侧出现不同的时间点拍的照片

“vuex状态管理数据状态查询与更改的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯