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',
 render: h => h(App)
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 这里定义初始值
let state = {
 count:10
};
const mutations = {
 add(context){
  context.count++
 },
 decrease(context){
  context.count--
 }
};
// 事件触发后的逻辑操作
// 参数为事件函数
const actions = {
 add(add){
  add.commit('add')
 },
 decrease(decrease){
  decrease.commit('decrease')
 },
 oddAdd({commit,state}){
  if (state.count % 2 === 0) {
   commit('add')
  }
 }
};
// 返回改变后的数值
const getters = {
 count(context){
  return context.count
 },
 getOdd(context) {
  return context.count % 2 === 0 ? '偶数' : '奇数'
 }
};
export default new Vuex.Store({
 state,
 mutations,
 actions,
 getters
})

App.vue

<template>
 <div id="app">
 <button @click="add">add</button>
 <button @click="decrease">decrease</button>
 <button @click="oddAdd">oddAdd</button>
 <div>{{count}}</div>
 <div>{{getOdd}}</div>
 </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
 export default {
  // 得到计算后的值
  computed:mapGetters(['count','getOdd']),
  // 发生点击事件触发不同函数
  methods:mapActions(['add','decrease','oddAdd'])
 }
</script>

GitHub: https://github.com/wmui

总结

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

您可能感兴趣的文章:

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

相关推荐

  • 详解使用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使用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全局组件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:有需要的同学可

  • 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 实例.单一状态树让我们能够直接

  • 正则表达式简介及在C++11中的简单使用教程

    正则表达式Regex(regular expression)是一种强大的描述字符序列的工具.在许多语言中都存在着正则表达式,C++11中也将正则表达式纳入了新标准的一部分,不仅如此,它还支持了6种不同的正则表达式的语法,分别是:ECMASCRIPT.basic.extended.awk.grep和egrep.其中ECMASCRIPT是默认的语法,具体使用哪种语法我们可以在构造正则表达式的时候指定. 正则表达式是一种文本模式.正则表达式是强大.便捷.高效的文本处理工具.正则表达式本身,加上如同一门

  • CentOS安装mysql5.7 及简单配置教程详解

    安装 保证你的用户有权限 安装 没有 切换 root su root (su的意思:swich user) # rpm -ivh http://dev.mysql.com/get/mysql57-community-release-el6-9.noarch.rpm 可能会遇到 warning: /var/tmp/rpm-tmp.6V5aFC: Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY 可以忽略(个人意见,百度了一下没找到合适的答案)

  • windows下Nginx多域名简单配置教程

    windows下Nginx多域名简单配置教程

    本文实例为大家分享了Nginx多域名的简单配置教程,供大家参考,具体内容如下 1. windows下安装nginx的目录结构如下: 2. 在nginx-1.12.1目录下conf/nginx.conf 内容 #user nobody; worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile o

  • 在Android Studio中Parcelable插件的简单使用教程

    在Android Studio中Parcelable插件的简单使用教程

    在Android Studio中,你可以很快速的使用Parcelable插件进行实体类的序列化的实现,使用该插件后,你的实体类可以快速的实现Parcelable接口而不用写额外的代码.因为该插件会帮你快速的生成必须提供的方法,可以说是很高效率的了. 首先需要下载该插件: 在File->Setting->Plugins里的搜索框内输入内容:android parcelable code generator,然后自己下载好重启studio即可使用该插件了. 下载插件界面: 重启studio: 点击

  • 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操作),希望对大家有所帮助,如果

  • python中format()函数的简单使用教程

    python中format()函数的简单使用教程

    先给大家介绍下python中format函数,在文章下面给大家介绍python.format()函数的简单使用 ---恢复内容开始--- python中format函数用于字符串的格式化 通过关键字 print('{名字}今天{动作}'.format(名字='陈某某',动作='拍视频'))#通过关键字 grade = {'name' : '陈某某', 'fenshu': '59'} print('{name}电工考了{fenshu}'.format(**grade))#通过关键字,可用字典当关键

  • vuex 的简单使用

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

  • Navicat For MySQL的简单使用教程

    1.前提是必须先安装好MySQL数据库(Mac下安装MySQL数据库见前一篇) 2.安装Navicat 3.点击navicate左上角:连接->MySQL->先测链接下,如果提示连接成功,就可以填写连接名,点击连接即可. 双击刚创建的连接下面会有四个数据库 用naVicate的命令行来查看该连接下有多少个数据库:先选择连接->导航栏上面的工具->命令列界面,此时会弹出一个命令窗口-> 输入:show databases;(注意后面一定要带分号) 使用相关数据库:use tes

随机推荐