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

uniapp vuex的使用

实现组件全局(数据)管理的一种机制,可以方便的实现组件之间共享数据,不同于上述三种传递值的方式。

可以把vuex当成一个store仓库,可以集中管理共享的数据,并且存储在vuex中的数据都是响应式的,数据与页面同步。

一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中。

注意:如果你使用的是HBuilderX,它已经内置了Vuex。如果你是使用npm或者yarn,可以通过以下命令安装:

安装vuex:
npm install vuex --save

1、创建Vuex的store:

在项目的src目录下创建一个store文件夹,然后在该文件夹中创建一个index.js文件,用于定义和配置Vuex store。

/* // 方式一import { createStore } from 'vuex';export default createStore({state() {return {count:0,// 定义一个名为 name 的状态//公共的变量,存储数据,这里的变量不能随便修改,只能通过触发mutations的方法才能改变};},mutations: {increment(state) {// 定义一个名为 increment 的修改状态方法state.count++;}//相当于同步的操作},actions: {increment({ commit }) {commit('increment');}//相当于异步的操作,不能直接改变state的值,只能通过触发mutations的方法才能改变},getters: {count: (state) => state.count},}); */// 方式二import Vuex from 'vuex'const store = new Vuex.Store({state: {count:0,// 定义一个名为 name 的状态//公共的变量,存储数据,这里的变量不能随便修改,只能通过触发mutations的方法才能改变},mutations: {increment(state) { // 定义一个名为 increment 的修改状态方法state.count ++;}//相当于同步的操作},actions: {//相当于异步的操作,不能直接改变state的值,只能通过触发mutations的方法才能改变}})export default store

2、在main.js中引入store并使用:

3.使用

import store from '@/store/index.js';//需要引入store***
export default{data(){return{}},methods:{addCountMethod() { // 定义一个名为 addMethod 的增加 count 的方法// 修改状态方法store.commit('increment');// 获取 state 中的 count 值const curcount = store.state.count;console.log("curcount",curcount);},  }
}


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

相关文章:

  • 【MQTT】代理服务比较RabbitMQ、Mosquitto 和 EMQX
  • 【疑难杂症】电脑休眠后无法开机,进入 steamVR 时电脑突然黑屏关机
  • Transformer(三):论文 Attention Is All You Need
  • git重置的四种类型(Git Reset)
  • 【AI写作宝-注册安全分析报告-无验证方式导致安全隐患】
  • 【LLM】3:从零开始训练大语言模型(预训练、微调、RLHF)
  • Transformer(三):论文 Attention Is All You Need
  • 【2024最新】渗透测试工具大全(超详细),收藏这一篇就够了!
  • 【comfyui教程】comfyui攻略:故障报错应对指南!
  • 神经网络算法
  • 基于51单片机俄罗斯方块游戏—可暂停
  • 安卓全屏实现
  • 【锁】聊一聊ReentrantLock 和 Synchronized 的区别
  • 丹摩征文活动|CogVideoX-2b:从安装到上线,轻松搞定全过程!
  • QML —— 圆形波浪进度条控件(附上源码)
  • docker save 和 docker load介绍
  • 常用的8款电脑加密软件分享|电脑办公文件加密软件推荐!
  • 【软考】系统架构设计师-计算机系统基础(1):计算机硬件
  • Linux的进程,线程;FreeRTOS的任务
  • 错误:No bean named ‘cxf‘ is defined
  • 酷炫的鼠标移入效果(附源码!!)
  • 【Spring】Spring框架中有有哪些常见的设计模式
  • 磁集成技术给磁性材料带来哪些新要求?
  • 壁纸集 1.2.12 | 壁纸聚合软件,内置4个图片接口,超多高清壁纸
  • WTN6040FP-14S语音芯片在电梯控制板中的应用开发方案-实现楼层指引背景音乐播放功能
  • Uniapp+Vue3+Ts+Unocss实现小程序、APP、H5的大转盘抽奖效果