一个demo 理解 vuex
相比接触vue的同学们已经看了官方文档了。这里我用一个简单的demo来阐述下vuex的知识点,虽然简单,但是容易理解。也加深自己的记忆。
用脚手架建立个项目vue init webpakc-simple ,安装下vuex,这里我新建2个组件productOne,productTwo.
好,如果想在2个组件中引用同一组数据,笨方法就是在每个组件的data里写上数据,聪明点可以在根组件中建立数据,通过props传给子组件。那么这里,我用vuex来储存数据。通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。
新建个store文件夹,里面新建个store.js。这里就是vuex状态管理作用的地方。
store.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
}
})
main.js中,引入store模块并注册。
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store.js'
new Vue({
el: '#app',
store,
render: h => h(App)
})
state
官网上说,state是作为一个单一状态树,用一个对象来包含了全部的应用层级状态。至此它便作为一个唯一数据源的存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
由于vuex的状态存储是响应式的,那么在组件中,我们就可以用计算属性来获取state状态。每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
products:[
{name:'apple', price: '2'},
{name:'banana', price: '3'},
{name:'pear', price: '4'},
{name:'melon', price: '5'},
]
}
})
两个组件中的结构大概如下:用计算属性用this.$state来返回这个状态。
<template>
<div class="product-one">
<h2>product-one</h2>
<ul>
<li v-for="item in product">
<div class="name">{{item.name}}</div>
<div class="price">{{item.price}}</div>
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
product() {
return this.$store.state.products
}
}
}
</script>
这样2个组件中的数据就可以统一在store.js中管理了。效果如下:
好,如果现在想改变下数据的一些内容,比如价格都涨2倍,那该怎么做呢,此时就用到getters
getter
官网上说,getters就相当于是store的计算属性,可以处理state的数据,它接受第一个参数就是state。那么接下来就简单了,把计算逻辑写在getters里,在组件中再获取getters就行了。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
products:[
{name:'apple', price: '2'},
{name:'banana', price: '3'},
{name:'pear', price: '4'},
{name:'melon', price: '5'},
]
},
getters: {
changeProduct: (state) => {
return state.products.map(val => {
return {
name: '**' + val.name + '--',
price: val.price*2
}
})
return state.products
}
}
})
在子组件中,用计算属性来获取getters,并在DOM中遍历这个计算属性。
export default {
computed: {
product() {
return this.$store.state.products
},
changeProduct(){
return this.$store.getters.changeProduct
}
}
}
<li v-for="item in changeProduct">
<div class="name">{{item.name}}</div>
<div class="price">{{item.price}}</div>
</li>
可以看到,2个组件的数据都改变了。
mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法。
简单来说,就是mutations就类似事件,子组件中用this.$store.commit('事件名')来获取。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
products:[
{name:'apple', price: '2'},
{name:'banana', price: '3'},
{name:'pear', price: '4'},
{name:'melon', price: '5'},
]
},
getters: {
changeProduct(state){
return state.products.map(val => {
return {
name: '**' + val.name + '--',
price: val.price*2
}
})
return state.products
}
},
mutations: {
decrePrice(state){
state.products.forEach(val => {
val.price -= 1
})
}
}
})
子组件中
methods: {
decrePrice(){
return this.$store.commit('decrePrice')
}
}
action
action和mutation类似,不同的是,Action 提交的是 mutation,而不是直接变更状态。而且Action支持异步。mutation必须同步执行。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
products:[
{name:'apple', price: '2'},
{name:'banana', price: '3'},
{name:'pear', price: '4'},
{name:'melon', price: '5'},
]
},
getters: {
changeProduct(state){
return state.products.map(val => {
return {
name: '**' + val.name + '--',
price: val.price*2
}
})
return state.products
}
},
mutations: {
decrePrice(state){
state.products.forEach(val => {
val.price -= 1
})
}
},
actions: {
decrePriceAction(context){
setTimeout(()=>{
context.commit('decrePrice')
}, 2000)
}
}
})
子组件中,用this.$store.dispatch('action的名字')来获取。
methods: {
decrePrice(){
// return this.$store.commit('decrePrice')
return this.$store.dispatch('decrePriceAction')
}
}
好,一些基本的就这样,其它的可以去官网看哦~
作者:从小就很瘦
链接:https://www.jianshu.com/p/5e6de947d088
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
一个demo 理解 vuex的更多相关文章
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- 理解Vuex的辅助函数mapState, mapActions, mapMutations用法
在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...
- [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法
原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...
- VueJs(14)---理解Vuex
理解Vuex 一.Vuex 是什么? 首先我们来分析一种实际开发中用vue.js的场景,你有n个组件,当你改变一个组件数据的时候需要同时改变其它n个组件的数据,那么我想你可能会对 vue 组件之间的通 ...
- .NET Core微服务之路:让我们对上一个Demo通讯进行修改,完成RPC通讯
最近一段时间有些事情耽搁了更新,抱歉各位了. 上一篇我们简单的介绍了DotNetty通信框架,并简单的介绍了基于DotNetty实现了回路(Echo)通信过程. 我们来回忆一下上一个项目的整个流程: ...
- (1)shiro简介和第一个demo
之前一直在用shiro开发,不过只是会使用,并没有深入了解,最近有时间学习了一下,把最近学习所得分享一下. shiro简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授 ...
- webpack快速入门——webpack3.X 快速上手一个Demo
1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...
- Angular2 不明真相第一个Demo例子
如果不是去年换工作接触到AngularJS,估计是不会花时间去学习这个框架的,毕竟是前端的框架,不是自己熟悉的领域.但是为了混得下去,去年就学习了AngularJS的一些用法,当时还整理了一些积累 & ...
- 分享知识-快乐自己:初始 Struts2 (基本概念)及 搭建第一个Demo
1):struts2 的基本概念: 1-1):Struts2 是什么? 1.Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2 ...
随机推荐
- codewars-7kyu:Sum of the first nth term of Series
Task: Your task is to write a function which returns the sum of following series upto nth term(param ...
- HDU 1251 统计难题(字典树入门模板题 很重要)
统计难题 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131070/65535 K (Java/Others)Total Submi ...
- 常用的SharePoint命令行代码
网站备份: Backup-SPSite http://sp2013 -Path C:\sp.bak 网站还原: Restore-SPSite http://sp2013 -Path C:\sp.bak ...
- modbustcp封装使用获取设备数据示例
//接受数据请求public function client($pz){ //参数1是:网络协议, //AF_INET: IPv4 网络协议.TCP 和 UDP 都可使用此协议.一般都 ...
- linux 学习第十八天学习(DNS分离解析、DHCP配置、邮件服务配置)
DNS分离解析技术 yum install bind-chroot systemctl restart named systemctl enable named vim /etc/named.conf ...
- React-Native使用极光进行消息推送
推送作为APP几乎必备的功能,不论是什么产品都免不了需要消息推送功能,一般做RN开发的可能都是前端出身(比如我),关于android ios 都不是很懂
- telerik WinForm主题切换
通过按钮或Form_Load中切换: ThemeResolutionService.ApplicationThemeName = "Windows 7"; //具体的主题名,不同的 ...
- 大数据入门第四天——基础部分之轻量级RPC框架的开发
一.概述 .掌握RPC原理 .掌握nio操作 .掌握netty简单的api .掌握自定义RPC框架 主要内容 1.RPC是什么 RPC(Remote Procedure Call)—远程过程调用,它是 ...
- idea中xml打开方式变成file,改回来
原文:https://blog.csdn.net/u012903926/article/details/80682885 创建了一个test文件,用的是普通text打开方式,然后你修改文件为test. ...
- 【RAC搭建报错】You need disks from at least two different failure groups, excluding quorum disks and quorum failure groups, to create a Disk Group with normal redundancy
报错: You need disks from at least two different failure groups, excluding quorum disks and quorum fai ...