第一步安装vuex(安装在生产环境)

npm install vuex

第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js  actions.js  mutations.js getters.js(后面会一一介绍这几个文件的作用)

第三步 main.js中引入store

import store from './store'

main.js中实例化的时候使用store

new Vue({
el:'#app',
store,//挂载stroe
router,
template:'<App>' ,
components:{App}
})

基础工作做完了,可以开始第一个demo了

vuex共分四个模块,components即组件,数据展示修改层面,actions业务处理事务转发,mutations具体的业务逻辑处理,getters拿到处理好后的数据返给components

四个模块可以都写在index.js里也可以单独写,然后在index.js里引入,这里是单独写再引入的

index.js

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters' //*即所有 Vue.use(Vuex) onst state = {
number:123
} //注册上面各个模块
const store = new Vuex.Stroe({
state,getters,actions,mutations
}) expoort default store

state{}数据存放位置,现在里面有个number数据为123

其实现在已经可以在组件里面用这个数据了,通过this.$store.state.number 只是官方不建议这么用

从页面开始

componentsA.vue

<template>
<div>
<p>vuex中的数据{{number}}</p>
<button @click='modifynumber'>修改number</button>
</div>
</template>
<script>
import{mapActions,mapGetters} from 'vuex' // 语法糖
//mapActions 相当于this.$store.dispatch('请求类型',数据) 发送请求
//mapGetters 相当于this.$store.getters.number export default{
data(){
retrun{ }
},
methods:{
...mapActions(
['modifynumber']//提交方法
), },
computed:{
...mapGetters(['number']) //获取state中的数据
}
}
</script>

mapActions写在methods中  mapGetters写在computed中

mutations中做具体的业务逻辑处理

mutations.js

export const modifynumber = (state) =>{
state.number ++
}

getters.js

export const number = (state) =>{ return state.number}

大概就是这些了

I love three things in the world: the sun, the moon, and you. The sun for day, the moon for night, and you forever.

浮世万千,吾爱有三,日 月  与卿,日为朝,月为暮,卿为朝朝暮暮。

vuex vue状态管理的更多相关文章

  1. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  2. vuex(vue状态管理)

    vuex(vue状态管理) 1.先安装vuex npm install vuex --save   2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...

  3. VueX(vue状态管理)简单小实例

    VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...

  4. 理解vuex的状态管理模式架构

    理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...

  5. vue状态管理器(用户登录简单应用)

    技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一  vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...

  6. Vue状态管理之Vuex

    Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...

  7. vue - 状态管理器 Vuex

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

  8. 五、vue状态管理模式vuex

    一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...

  9. Vue学习日记(四)——Vue状态管理vuex

    前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...

随机推荐

  1. Java基础之 学java从宝宝的命令行做起

    JAVA学习笔记 JAVA命令行 在当前文件的命令行下 编译:输入命令javac GetGreeting.java 执行 命令 Java GetGreeting 有package包的程序 1.到文件当 ...

  2. Web前端面试指导(七):入职后的建议

    7.2 关于合同 签合同的时候,看公司要求,有些是3年,有些是5年,不要怕,签了就是了,真到想走的时候,提前说一声,随时可以走,不存在什么违约赔偿. 注意:你的合同和薪资都是属于保密的,不能让公司其他 ...

  3. css滤镜模糊效果filter和backdrop-filter

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HBase伪分布式安装(HDFS)+ZooKeeper安装+HBase数据操作+HBase架构体系

    HBase1.2.2伪分布式安装(HDFS)+ZooKeeper-3.4.8安装配置+HBase表和数据操作+HBase的架构体系+单例安装,记录了在Ubuntu下对HBase1.2.2的实践操作,H ...

  5. 菜鸟学习Spring——SpringMVC注解版将URL中的参数转成实体

    一.概述 将URL中参数转成实体在我们项目中用的很多比如界面提交表单请求后台的Contorller的时候通过URL传递了一串参数到后台,后台通过Spring让界面的字段与实体的字段映射来实现给后台的实 ...

  6. Eclipse集成Maven(手工安装Maven且手工集成到Eclipse)

    1.操作环境 操作系统:win8 64位 IDE:Helios Eclipse 1.8 JDK:1.6 2.资源准备 2.1 maven安装包: apache-maven-3.2.5-bin.zip  ...

  7. (转)Wireshark基本介绍和学习TCP三次握手

    原地址https://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html#filter 阅读目录 wireshark介绍 wireshar ...

  8. Codeforces Round #429

    Table of Contents A. Generous KefaB. GodsendC. Leha and Function A. Generous Kefa One day Kefa found ...

  9. 【转】iOS的APP资源,开源的哦

    完整项目 文章转自  “标哥的技术博客” IOS-Swift2.0 高仿半糖App 这个开源项目为半糖,官网➡,类似于美丽说,一款电商App,使用语言:Swift2.0,开发工具: Xcode 7.1 ...

  10. 一个简单示例看懂.Net 并行编程

    此示例尽量以最简洁的代码演示并行处理的功能,此示例代码中分别用单线程和多线程分别执行5次耗时1秒的操作.打印出执行过程及耗时. 以下为示例代码,.net framework要求4.0以上. using ...