第一步安装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. WPF - MVVM 之TreeView

    在项目中使用OnPropertyChanged方法,最简单的实例: private event PropertyChangedEventHandler PropertyChanged; protect ...

  2. select支持多查询,获取分页count

    在我们使用mybatis 时,当我们根据分页去查询数据集时,需要传入的参数有page(页码)和size(每页的条数),而我们期望获取到的数据有,小于或等于size的list数据集,同时我们还需要得到一 ...

  3. 微信小程序问题总结

    1.navigator不能跳转到tabBar所包含的页面 例如: tabbar包含center页面,不包含page1页面,使用如下跳转: <navigator url='../center/ce ...

  4. Zepto和Jquery区别

    ---恢复内容开始--- <zepto移动端事件> 1.$("#xx").tap(function(){ //tap在屏幕点击时触发 alert("sssss ...

  5. 采用C/C++语言如何实现复数抽象数据类型Complex

    记录一下! 采用C/C++语言如何实现复数抽象数据类型Complex #include <stdio.h> typedef struct Complex { double e1; // 实 ...

  6. c#利用三层架构做一个简单的登录窗体

    就个人而言,三层架构有点难理解,不知道该如何下手,各层与各层之间怎么调用 最近一直在研究三层架构,经过网上学习与多方打听写一下自己的心得.有不足之处,可以评论和私聊探讨 言归正传: 三层架构(3-ti ...

  7. when create a table,then show error ora-00952 tablespace tsb_1 not exist

    QUESTION:When create a table,then show error ora-00952 tablespace tsb_1 not exist. STEP: 1.select us ...

  8. oracle_How to Recover Data (Without a Backup!)

    How to Recover Data (Without a Backup!) It's the classic career-limiting maneuver(职业限制机动): accidenta ...

  9. postgres循环sql

    CREATE OR replace function loop_addDevice(i integer) RETURNS integer as $$ declare count alias ; all ...

  10. note03-计算机网络

    3. 网络层 网络层的主要协议有IP.ICMP.IGMP.ARP等: IP地址分类:ABCDE ,根据32比特位的IP中网络号所占位数进行决定IP的类型 A:0 0000000 网络号| 000000 ...