vuex使用步骤详解

这次给大家带来vuex使用步骤详解,vuex使用的注意事项有哪些,下面就是实战案例,一起来看一下。

vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。

1.在vue 组件中

执行enabledcheckbox方法 ,true 为参数,用来改变state中的值

  this.$store.dispatch("enabledcheckbox",true)

登录后复制

从state获取useredit的值

this.$store.state.useredit

登录后复制

2 在vuex导出的对象对添加 值到state

添加 mutations 来改变state的值

添加 actions 来 mutations

import Vue from 'vue'import vuex from 'vuex'Vue.use(vuex)export default new vuex.Store({    state: {      useredit: false,    },    mutations: {      ENABLEDCHECKBOX(state, value) {        state.checkboxDisable = value      },    },    actions: {      enabledcheckbox({ commit }, value) {        commit('ENABLEDCHECKBOX', value)      },    }  })  //console.log(vuex)

登录后复制

在main.js

import store from './vuex'new Vue({ el: '#app', router, store, render:h=>h(App)})

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

vue+axios实现数据交互

Angular Component实用技巧详解

以上就是vuex使用步骤详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2763333.html

(0)
上一篇 2025年3月8日 10:09:47
下一篇 2025年3月5日 17:56:19

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS中事件委托使用详解

    这次给大家带来JS中事件委托使用详解,JS中事件委托使用的注意事项有哪些,下面就是实战案例,一起来看一下。 事件委托(也叫事件代理),其实这个问题也简单,要想弄明白事件委托,我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子: 点击 var…

    编程技术 2025年3月8日
    200
  • jquery里filter()方法使用详解

    这次给大家带来jquery里filter()方法使用详解,jquery里filter()方法使用的注意事项有哪些,下面就是实战案例,一起来看一下。 定义和用法 filter() 方法返回符合一定条件的元素。 该方法让您规定一个条件。不符合条…

    编程技术 2025年3月8日
    200
  • PHP静态绑定使用详解

    这次给大家带来PHP静态绑定使用详解,PHP静态绑定使用的注意事项有哪些,下面就是实战案例,一起来看一下。 基础知识 1. 范围解析操作符 (::) 可以用于访问静态成员,类常量,还可以用于覆盖类中的属性和方法。 self,parent 和…

    编程技术 2025年3月8日
    200
  • react-native封装插件swiper使用步骤详解

    这次给大家带来react-native封装插件swiper使用步骤详解,react-native封装插件swiper使用的注意事项有哪些,下面就是实战案例,一起来看一下。 首先创建简单的react-native项目,创建一个文件夹。然后用命…

    2025年3月8日
    200
  • js 判断客户端能否上网详解

    这篇文章主要介绍了js 判断客户端能否上网详解,需要的朋友可以参考下。 第一种: if(!window.jQuery){ alert(“能上网”); }else{ alert(“不能上网”); } 登录后复制 第二种:  用js跨域来做  …

    编程技术 2025年3月8日
    200
  • PHP图片简单上传功能详解

    这篇文章主要为大家详细介绍了php图片简单上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 以下是代码:    登录后复制 总结: php 上传图片,一般都使用move_uploaded_file方法保存在服务器上。但如果一个网…

    编程技术 2025年3月8日
    200
  • Node调试工具使用步骤详解

    这次给大家带来Node调试工具使用步骤详解,Node调试工具使用的注意事项有哪些,下面就是实战案例,一起来看一下。 2016年,Node 决定将 Chrome 浏览器的”开发者工具”作为官方的调试工具,使得 Node…

    2025年3月8日 编程技术
    200
  • vue做出树形菜单步骤详解

    这次给大家带来vue做出树形菜单步骤详解,vue做出树形菜单的注意事项有哪些,下面就是实战案例,一起来看一下。 vue *{ color:#585858; } #app{ min-height: 650px; } #app li{ list…

    编程技术 2025年3月8日
    200
  • vue组建与路由使用总结

    这次给大家带来vue组建与路由使用总结,vue组建与路由使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1、组件三种挂载方式 自动挂载 var app3 = new Vue({ el: ‘#app-3’, data: { seen:…

    编程技术 2025年3月8日
    200
  • Angular CLI生成 Angular 5项目使用详解

    这次给大家带来Angular CLI生成 Angular 5项目使用详解,Angular CLI生成 Angular 5项目的注意事项有哪些,下面就是实战案例,一起来看一下。 Angular CLI 官网:https://github.co…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论