vuex 的简单使用

vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了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)})

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

jQuery Ajax方式上传文件的方法

利用ajax实现异步刷新请求

通过Ajax方式上传文件使用FormData进行Ajax请求

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

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

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

(0)
上一篇 2025年3月8日 07:23:01
下一篇 2025年2月24日 14:22:59

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

相关推荐

  • Vue封装一个简单轻量的上传文件组件的示例

    这篇文章主要介绍了vue封装一个简单轻量的上传文件组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 一、之前遇到的一些问题 项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总…

    编程技术 2025年3月8日
    200
  • 怎样使用JS继承与多继承

    这次给大家带来怎样使用JS继承与多继承,使用JS继承与多继承的注意事项有哪些,下面就是实战案例,一起来看一下。 虽然最新的EC6里边已经有了class的相关功能,但是从普及度上和阅读旧代码需求的方面来看,这点知识也得了解一下。 本文结构: …

    2025年3月8日
    200
  • 如何使用JS继承与多继承

    这次给大家带来如何使用JS继承与多继承,使用JS继承与多继承的注意事项有哪些,下面就是实战案例,一起来看一下。 虽然最新的EC6里边已经有了class的相关功能,但是从普及度上和阅读旧代码需求的方面来看,这点知识也得了解一下。 本文结构: …

    2025年3月8日
    200
  • Angular4学习笔记router的简单使用

    本篇文章主要介绍了angular4学习笔记router的简单使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 router,也就是路由,是前端中一个比较重要的概念。通过router把特定的地址和对应的页面关联…

    2025年3月8日 编程技术
    200
  • 如何对vue传参与router使用

    这次给大家带来如何对vue传参与router使用,对vue传参与router使用的注意事项有哪些,下面就是实战案例,一起来看一下。 vue传参方法一 1,路由配置 { path: ‘/describe/:id’, name: ‘Descri…

    编程技术 2025年3月8日
    200
  • vue文件树组件使用详解

    这篇文章主要为大家详细介绍了vue文件树组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了vue文件树组件的实现方法,供大家参考,具体内容如下 本文主要是分析vue官方仓库里的文件树组件[vue gith…

    编程技术 2025年3月8日
    200
  • 如何使用vue中swiper

    这次给大家带来如何使用vue中swiper,使用vue中swiper的注意事项有哪些,下面就是实战案例,一起来看一下。 Install 在vue cli下的使用 npm install vue-awesome-swiper –s…

    2025年3月8日 编程技术
    200
  • 如何使用vue配置多页面

    这次给大家带来如何使用vue配置多页面,使用vue配置多页面的注意事项有哪些,下面就是实战案例,一起来看一下。 1.安装环境 ①安装node.js 并添加入环境变量PATH ②安装淘宝NPM镜像 $ npm install -g cnpm …

    2025年3月8日
    200
  • js类型判断使用详解

    这次给大家带来js类型判断使用详解,js类型判断使用的注意事项有哪些,下面就是实战案例,一起来看一下。 js类型转换中typeof会将null也识别为object, 而且返回的类型比少,我们用Object.prototype.toStrin…

    编程技术 2025年3月8日
    200
  • vue组件jsx语法使用步奏详解

    这次给大家带来vue组件jsx语法使用步奏详解,vue组件jsx语法使用的注意事项有哪些,下面就是实战案例,一起来看一下。 配置 需要用到babel插件 安装 npm install babel-plugin-syntax-jsx babe…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论