vuex里面的store架构
将store文件夹分为四个文件夹,分别是actions,getters,mutations,state。
action:和mutatation功能是类似的,都是修改state里面的数据,区别是action用于异步修改
getter:后端传过来的数据,如果需要做一些处理就在getter里面写。
mutations:用于处理同步数据修改
state:存放后端传过来的原生数据。
父组件通过调用action对store里面数据进行了处理,他的子组件只要调用getter就可以获取到父组件处理后的数据
如下是文件结构:
这里我们演示一个小栗子:
state.js
export default{
count: 0,
firstName: 'zha',
lastName: 'lu'
}
getter.js:拼接两个字符串
// 和computer一样,都是对后台返回的数据做处理,只是这个可以应用多个页面
export default {
fullName (state) {
const name = state.firstName + state.lastName
return name
}
}
mutations.js 执行函数updateCount
// 所有数据的修改都尽量放在mutations,将mutation写成一个对象,它同步操作,不能有异步的代码在里面
export default{
// 只能有两个参数
updateCount (state, num) {
state.count = num
}
}
actions.js 每隔一段时间提交updateCount
// 和mutations差不多,区别是是action可以存放异步的代码
export default {
updateCountAsync (store, data) {
setTimeout(() => (
store.commit('updateCount', data.num)
), data.time)
}
}
store.js:上面几个都需要在这里进行注册
import Vuex from 'vuex'
import defaultState from './state/state.js'
import mutations from './mutations/mutations'
import getters from './getters/getters.js'
import actions from './actions/actions.js'
// 通过函数,返回一个store
export default () => {
return new Vuex.Store({
state: defaultState,
mutations,
getters,
actions
})
}
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/second">second</router-link>
<router-view/>
{{counter}} {{fullName}}
</div>
</template> <script>
import {
mapState,
mapGetters,
mapMutations,
mapActions
} from 'vuex'
export default {
name: 'App',
mounted () {
console.log(this.$store)
// let i = 1
// actions异步处理,未使用mapActions
// this.$store.dispatch('updateCountAsync', {
// num: 5,
// time: 2000
// })
// 使用mapActions,在调用方法的时候不用传方法名
this.updateCountAsync(
{
num: 5,
time: 2000
})
// mutations同步处理,每隔一秒进行count+1
// setInterval(() => {
// this.$store.commit('updateCount', i++)
// }, 1000)
},
computed: {
/* count () {
return this.$store.state.count
},和下面的mapState功能一致 ...要使用命令
npm i babel-preset-stage-1
*/
...mapState({
// counter: 'count'和下面一样,只是这个是传对象,下面是传方法
counter: (state) => state.count
}),
...mapGetters(['fullName'])
// 和上面一样fullName () {
// return this.$store.getters.fullName
// }
},
methods: {
...mapActions(['updateCountAsync']),
...mapMutations(['updateCount'])
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vuex里面的store架构的更多相关文章
- vuex里mapState,mapGetters使用详解
这次给大家带来vuex里mapState,mapGetters使用详解,vuex里mapState,mapGetters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 一.介绍 vuex里面的 ...
- Vuex项目实战store
首先简单了解一下什么是Vuex? Vuex是一个专为Vue.js应用程序开发的状态管理模式.采用集中式存储来管理应用所有组件的状态. 以下是对vuex的使用的简单介绍: 一.安装 npm i vuex ...
- 友盟推送里面的Alias怎么用?可以理解成账号吗?
友盟推送里面的Alias怎么用?可以理解成账号吗? 我们的App有自己的账号体系的,想在每次用户登陆的时候,给用户发一个欢迎消息. 看了一下友盟推送,里面有一个概念叫做Alias(别名),但是官方文档 ...
- 踩坑记录-nuxt引入vuex报错store/index.js should export a method that returns a Vuex instance.
错误 store/index.js代码如下: import Vue from 'vue'; import Vuex from 'vuex'; import city from './moudle/ci ...
- 图解Go里面的sync.Map了解编程语言核心实现源码
基础筑基 在大多数语言中原始map都不是一个线程安全的数据结构,那如果要在多个线程或者goroutine中对线程进行更改就需要加锁,除了加1个大锁,不同的语言还有不同的优化方式, 像在java和go这 ...
- vue : 在vuex里写一个数组首尾元素互换的方法
不着急上代码,先想几个问题. vuex里怎么写方法? mutation里写vuex方法,组件中用commit调用. 数组首尾元素怎么互换? arr.splice(0, 0, arr[arr.lengt ...
- Vuex里的module选项和移动端布局
Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出
- Activity往另外一个Activity传值,Fragment获取另外一个Activity里面的值。
在oneActivity中实现跳转到MainActivity //intent 用来跳转另外一个MainActivity,bundle传值到MainActivity Intent Ma ...
- Java基本概念(2)J2EE里面的2是什么意思
J2EE里面的2是什么意思 J2SE,J2SE,J2ME中2的含义要追溯要1998年.1998年Java 1.2版本发布,1999年发布Java 1.2的标准版,企业版,微型版三个版本,为了区分这三个 ...
随机推荐
- 测试用例管理工具-TestLink
TestLink是基于web的测试用例管理系统,主要功能是测试用例的创建.管理和执行,并且还提供了一些简单的统计功能,主要功能包括: 测试需求管理 测试用例管理 测试用例对测试需求的覆盖管理 测试计划 ...
- Java 计算两点间的全部路径(二)
一.有向线段,存储开始点与结束点 /** * 有方向的线段 * * @author Gm * */ public class DirectionLine implements Cloneable { ...
- OpenSSL(2)创建私有证书颁发机构
如果想要建立自己的CA, OpenSSL已经包含了所有你需要的东西.所有的操作都通过纯命令行执行,虽然不那么友好,整个过程也比较长,但是这可以让你去思考每个细节. 我建议自己创建一套私有的 CA主要是 ...
- 深入理解并使用python的模块与包
模块 编写好的一个python文件可以有两种用途:1)脚本,一个文件就是整个程序,用来被执行2)模块,文件中存放着一堆功能,用来被导入使用 模块的分类 1)开发者编写的 .py文件2 ) 由C或C++ ...
- Java入门指南-01 基本概要说明
一.Java语言概述 Java是一门面向对象编程语言.编程,即编写程序.程序对于我们来说,应该是有所了解的.只是有可能你们不知道而已.比如,我们电脑上的 QQ.谷歌浏览器等,都叫做应用程序. 二.本系 ...
- 504错误解决办法 让你的浏览器强制在后端服务器执行而不用通过前端CDN服务器
因为后端执行时间过长,前端不等待,导致提示504错误的解决办法 504 错误是因为你的CDN服务器设置的延时有限, 超时导致的504 是前端不等待中止,是前端不行,后端应该正常 502 错误是后端 ...
- vim简明教程(附快速记忆方法)
vim分为四种模式: 普通模式(normal mode) 插入模式(insert mode) 可视模式(visual mode) 命令模式(excute mode) 下面整理了常用的快捷键和记忆方法( ...
- inode,软硬链接
如何查看inode ll -di /boot / /app查看文件和文件夹的inode号 df -i查看挂载点文件夹的inode号 做inode增长实验 创建60万个文件的方法1(效率不高):for ...
- 原型模式故事链(5)--JS变量作用域、作用域链、闭包
上一章 JS执行上下文.变量提升.函数声明 传送门:https://segmentfault.com/a/11... 本次我们主要讲讲变量作用域和闭包变量作用域:顾名思义:变量起作用的范围.变量分为全 ...
- 使用 Capistrano 部署总结
使用 Capistrano 部署总结 2014年6月27日 admin发表评论阅读评论 简介 Capistrano 是一个 Ruby 程序,它提供高级的工具集来部署你的 Web应用到服务器上.Capi ...