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)
})

总结

以上所述是小编给大家介绍的vuex 的简单使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存
  • 自定义vue全局组件use使用、vuex的使用详解
  • VUE使用vuex解决模块间传值问题的方法
  • Vue.js实战之使用Vuex + axios发送请求详解
  • 如何使用Vuex+Vue.js构建单页应用
赞 (0)

相关推荐

  • 自定义vue全局组件use使用、vuex的使用详解

    自定义vue全局组件use使用(解释vue.use()的原理) 我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等. 其实使用的这些都是全局组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理 而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install自定义一个全局Loading组件,并使用: 总结目录: |-components |-loading |-index.js 导出

  • 如何使用Vuex+Vue.js构建单页应用

    如何使用Vuex+Vue.js构建单页应用

    前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可

  • VUE使用vuex解决模块间传值问题的方法

    VUE使用vuex解决模块间传值问题的方法

    在看电影.打Dota.撸代码间来回,犹豫不决,终于还是下决心继续学习VUE. 仿照 conde.js 官网写的一个demo,目前已经基本可用,但始终缺少登录页,没有用户权限管理,于是开撸...... <template> <div id="login"> <c-header></c-header> <c-form></c-form> <p class="content-block">

  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    不好意思,标题比较啰嗦,因为这次的流水账确实属于一个比较细节的小东西,下面详细讲: 1需求 最近在使用electron-vue开发一个跨平台的桌面端软件,刚上手写了几个页面,遇到一个问题:桌面端软件通常会有导航需求,类似下图 导航按钮 点击返回按钮,返回上一页,并且显示上页内容.其实不止App,即使普通的网页中也会有此类需求,尤其是使用vue写SPA时. 项目中的导航几乎都是采用router.push({name: 'xxx', params: {xxx:123...}})这种方式.这种方式导致

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • vue-cli下的vuex的简单Demo图解(实现加1减1操作)

    1.vue-cli搭建好项目之后,使用npm安装vuex npm install vuex --save 2.在项目目录中构建vuex目录(这里我新建了store的文件夹,里面新建了store.js文件) 3.在vue项目中的入口文件main.js中,为实例化的 Vue对象添加 store对象 4.配置和编写store.js文件 5.组件中使用vuex中存放的数据 6.实现效果 总结 以上所述是小编给大家介绍的vue-cli下的vuex的简单Demo(实现加1减1操作),希望对大家有所帮助,如果

  • vuex的简单使用教程

    vuex的简单使用教程

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. 使用vuex进行组件间数据的管理 npm i vuex -S main.js import Vue from 'vue' import App from './App.vue' import store from './store.js' new Vue({ store, el: '#app', r

  • 详解vuex的简单使用

    1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js 2.1 state.js state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态.至此它便作为一个『唯一数据源(SSOT)』而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接

  • vuex 的简单使用

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. 1.在vue 组件中 执行enabledcheckbox方法 ,true 为参数,用来改变state中的值 this.$store.dispatch("enabledcheckbox",true) 从state获取useredit的值 this.$store.state.useredit

  • Vuex实现简单购物车

    Vuex实现简单购物车

    本文实例为大家分享了Vuex实现简单购物车的具体代码,供大家参考,具体内容如下 文件结构 App.vue <template> <div id="app"> <h3>Shopping Cart Demo</h3> <hr> <h4>Products:</h4> <ProductList /> <hr> <h4>My Cart</h4> <Shoppi

  • 详解vuex的简单todolist例子

    一个简单的vuex应用的小例子,一段自己的学习记录. todolist就是一个简单的输入框,一个按钮,一个文本显示区域,可以逐条进行删除. 1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码 <template> <div class="hello"> <input type="text"> <button>增加事项</button> <ul> &l

  • vuex vue简单使用知识点总结

    vue概念:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据: 配置vuex的步骤: 1.运行cnpm i vuex -S 2.导包 import Vuex from 'vuex' 3.将vuex注册到vue中 Vue.use(Vuex) 4.new Vuex.Store() 实例,得到一个 数据仓储对象 var store = new Vuex.Store({ state: { // 大家可以把

  • vuex实现简单的购物车功能

    vuex实现简单的购物车功能

    本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 文件目录如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list /> </div> <h2>已选商品</h2> <div class="shop-cartbox&qu

  • Vuex 使用及简单实例(计数器)

    Vuex 使用及简单实例(计数器)

    前一段时间因为需要使用vue,特地去学习了一下.但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程. 什么是Vuex? vuex是专门为vue.js应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理. 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install

  • Vue的Flux框架之Vuex状态管理器

    Vue的Flux框架之Vuex状态管理器

    学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 React 里面的 Redux 的状态管理器,用来管理Vue的所有组件状态. 为什么使用Vuex? 当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态. 遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理

随机推荐