vuex vue状态管理
第一步安装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状态管理的更多相关文章
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- vuex(vue状态管理)
vuex(vue状态管理) 1.先安装vuex npm install vuex --save 2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...
- VueX(vue状态管理)简单小实例
VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- vue状态管理器(用户登录简单应用)
技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一 vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...
- Vue状态管理之Vuex
Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...
- vue - 状态管理器 Vuex
状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.
- 五、vue状态管理模式vuex
一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...
- Vue学习日记(四)——Vue状态管理vuex
前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
随机推荐
- 01.使用File类读写文件
使用File类去读数据: 方法一:使用ReadAllBytes(); 方法 namespace _01.使用File类读写数据01 { class Program { static void Main ...
- Mac 10.11.4 安装mysql-5.7.13 默认密码问题
今天下载了一个最新版的mysql dmg安装包来安装mysql,安装的整个过程竟然都没有提示输入root用户默认密码,我也没太在意,然后连接数据库时竟然提示输入密码,当时就一脸懵逼了.尝试各种密码,为 ...
- 位运算(3)——Reverse Bits
翻转32位无符号二进制整数 Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (r ...
- Csharp: Send Email
/// <summary> /// 發送郵件 /// 塗聚文 /// 20130816 /// </summary> /// <param name="to&q ...
- App更新(Android)
App更新(Android) 前言:现在一般的Android软件都是需要不断更新的,当你打开某个app的时候,如果有新的版本,它会提示你有新版本需要更新.该项目实现的就是这个功能.并且有强制更新和更 ...
- 上传文件到Maven仓库
1.上传jar到本地仓库 mvn install:install-file -DgroupId=org.csource -DartifactId=fastdfs-client-java -Dversi ...
- C/C++:函数的调用约定(Calling Convention)和名称修饰(Decorated Name)以及两者不匹配引起的问题
转自:http://blog.csdn.net/zskof/article/details/3475182 注:C++有着与C不同的名称修饰,主要是为了解决重载(overload):调用约定则影响函数 ...
- ubuntu 18 下配置 WebStorm 编译 sass
ubuntu 18 下配置 WebStorm 编译 scss 标签(空格分隔): IDE 安装Ruby: sudo apt-get install ruby ruby -v ruby 2.5.1p57 ...
- verilog 三段式状态机的技巧
三段式代码多,但是有时钟同步,延时少,组合逻辑跟时序逻辑分开并行出错少. (1)同步状态转移 (2)当前状态判断接下来的状态 (3)动作输出 如果程序复杂可以不止三个always .always ...
- docker-day1-安装和基本使用
Docker 1.什么是docker Docker 是一个开源项目,可以实现轻量级的操作系统虚拟化解决方案. Docker 的基础是 Linux 容器(LXC)等技术.在 LXC 的基础上 Docke ...