当前位置: 首页 > news >正文

vuex的store应用

1.在pakage.json加一行
在这里插入图片描述
2.和main同级别加一个js文件

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {langFlag: new Date().getTime()},mutations: {setLangFlag(state) {state.langFlag = new Date().getTime()}}
})

3.在main.js加store,全局应用:
在这里插入图片描述
4.一个界面调用另一个界面的方法,这里this.$store.commit(‘setLangFlag’),调用vuex的方法,修改vuex的数据
在这里插入图片描述
5.在一个页面调用:
当依赖的数据发生变化时,计算属性会重新计算
cundang.vue里面的computed获取vuex的数据
在这里插入图片描述
监听这个事件,调用echarts图表方法
在这里插入图片描述
因为切换语言的时候,修改了vuex的数据,vuex的数据是全局的,所以在cundang.vue这个页面能获取到

就是切换语言是在一个组件里, 页面显示的图表是在另一个组件 这俩是同级组件
在这里插入图片描述
DefaultContainer 里 切换语言上面加的那个 cundang组件 不是实际显示在页面上的组件 所以没生效


http://www.mrgr.cn/news/53857.html

相关文章:

  • 枸杞常见病虫害识别数据集(猫脸码客 第220期)
  • 【C++笔试强训】如何成为算法糕手Day11
  • Python编程探索:从基础语法到循环结构实践(下)
  • Unity Apple Vision Pro 自定义手势识别交互
  • 编写自定义组件props报错 TypeError: Right-hand side of ‘instanceof‘ is not an object的解决方法
  • AI论文写作:如何轻松实现高原创度大揭秘
  • 一次恶意程序分析
  • 【JAVA 百日谈】 001 AssemblyAndDisDemo
  • rabbitMQ的延迟队列(死信交换机)
  • 消费即赚,循环购物模式引领潮流
  • [LeetCode] 1162. 地图分析
  • vue el-drawer 标签点击蒙版就关闭的问题
  • 密码学原理
  • VSCode配置Python开发环境【练习环境VS工程环境】
  • vulnhub靶场之digitalworld.local DEVELOPMENT
  • 第五届光学与图像处理国际学术会议(ICOIP 2025)征稿中版面有限!
  • 超详细的Java Web开发
  • 深度学习模型训练的主要流程(不定时更新中)
  • 【VUE】Vue中 computed计算属性和watch侦听器的区别
  • 018_基于python+django荣誉证书管理系统2024_jytq9489