Vuex-全局状态管理【传递参数】
由于 async 异步获取数据,加载页面时,页面会感觉一闪而过的抖动,如果想页面不闪,推荐使用 SSR 【vuex】,由服务端 渲染SSR页面出来。此话记于 2020年01月08号,项目nuxt.js 构建 Vue+Koa+MongoDB 全栈美团项目
src根目录
新建store文件夹,新建index.js 作为入口
在store文件夹中 新建modules文件夹
modules文件夹中,新建 a.js b.js 2个文件
a.js
const state = {
money: 10
} const mutations = {
// 我这里收到 参数以后,操作state.money的值改变
add(state, param) {
state.money += param
},
reduce(state) {
state.money--
}
} const actions = {
//这里先接收到参数,我在驱动mutation里的add方法,同时传入参数
Actions_add: ({ commit }, param) => {
commit('add', param)
},
Actions_reduce: ({ commit }) => {
commit('reduce')
}
} export default {
namespaced: true,//命名空间模块
state,
mutations,
actions
}
b.js
const state = {
count: 1
} const mutations = {
add(state){
state.count++
},
reduce(state) {
state.count--
}
} const actions = {
Actions_add:({commit})=>{
commit('add')
},
Actions_reduce:({commit})=>{
commit('reduce')
}
} export default {
namespaced:true,//命名空间模块
state,
mutations,
actions
}
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import money from './modules/a'
import count from './modules/b' Vue.use(Vuex) export default new Vuex.Store({
modules: {
money,
count
}
})
* 记得不要忘记在 main.js 中引入
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
// import store from './store'
Vue.config.productionTip = false new Vue({
store,
render: h => h(App)
}).$mount('#app')
在新建 a.vue \ b.vue 2个组件
a.vue
<template>
<div class="container">
<h1>Money</h1>
<hr />
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-success" @click="Actions_add(2)">增加2</button>
</span>
<input type="text" class="form-control" v-model="money.money" />
<span class="input-group-btn">
<button type="button" class="btn btn-danger" @click="Actions_reduce">减少</button>
</span>
</div>
</div>
</template> <script>
import { mapActions, mapState } from "vuex"
export default {
methods: {
...mapActions('money',["Actions_add", "Actions_reduce"])
},
computed: {
...mapState([
'money'
])
} }
</script> <style> </style>
b.vue
<template>
<div class="container">
<h1>Count</h1>
<hr />
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-success" @click="Actions_add">增加</button>
</span>
<input type="text" class="form-control" v-model="count.count" />
<span class="input-group-btn">
<button type="button" class="btn btn-danger" @click="Actions_reduce">减少</button>
</span>
</div>
</div>
</template> <script>
import { mapActions, mapState } from "vuex"
export default {
methods: {
...mapActions('count',["Actions_add", "Actions_reduce"])
},
computed: {
...mapState([
'count'
])
} }
</script> <style> </style>
效果图:
Vuex-全局状态管理【传递参数】的更多相关文章
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- 小程序全局状态管理,在页面中获取globalData和使用globalSetData
GitHub: https://github.com/WozHuang/mp-extend 主要目标 微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...
- 微信小程序全局状态管理 wxscv
微信小程序中,数据状态不同页面中不能跨页面同步更新,也就是缺失类似vuex,mobx,redux全局的数据状态管理功能. 有些人移植了这些库,但是毕竟不是微信小程序生态的东西. Tencent也发布了 ...
- Vuex实现状态管理
Vuex使用总结 1 Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex抽取了各个组件的共享部分,以全局单例模式进行状态的管理.在原生vue中各个组件之间传值使用的 ...
- vuex vue状态管理
第一步安装vuex(安装在生产环境) npm install vuex 第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js actions ...
- Vuex,状态管理模式
对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导 ...
- vue2.0 仿手机新闻站(三)通过 vuex 进行状态管理
1.创建 store 结构 2.main.js 引入 vuex 3. App.vue 组件使用 vuex <template> <div id="app"&g ...
- Vuex.js状态管理共享数据 - day8
VScode文件目录: amount.vue代码如下: <template> <div> <!-- <h3>{{ $store.state.count }}& ...
- vuex的状态管理模式
1.store.js Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)) state:存放数据. mutations:提交状态 ...
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
随机推荐
- 使用Postman对HTTP接口进行功能测试
一.工具说明 Postman是一种网页调试与发送网页http请求的工具.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 二.应用场景 1.Get请求 get请求通过接口参数拼 ...
- 移动端自动化==>Appium定位方式总结
1.ID Android Android的resource-id对应ID定位方式,可以通过index来获取需要的元素(从0开始查找dom树中的同名resource-id属性).使用appium-des ...
- 【MM系列】SAP MM模块-BAPI:BAPI_GOODSMVT_CREATE的CODE分析
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-BAPI:BAPI ...
- 获取win10壁纸
执行命令会将所有壁纸拷贝到桌面上的wallpaper文件夹内 bat xcopy %LOCALAPPDATA%\Packages\Microsoft.Windows.ContentDeliveryMa ...
- [Python3] 002 Python3 中常用的命名规则
目录 1. 什么可以用来命名? 1.1 老三样: 字母.数字.下划线 1.2 其他 2. 什么不能用来命名? Python3 中的"关键字" 3. 命名"小贴士" ...
- 发布项目到github上web服务器来运行
$ git add dist Administrator@LuoTong- MINGW32 /D/react_workspace (master) $ git commit -m "git ...
- 查看Dubbo服务-通过zk客户端
一.基本概念 https://www.cnblogs.com/huasky/p/8268568.html 二.下载与安装 1.进入要下载的版本的目录,选择.tar.gz文件下载 下载链接:http:/ ...
- 小z的洞穴之旅 QDUOJ 并查集+连通块
小z的洞穴之旅 QDUOJ 并查集+连通块 原题链接 题意 小 z 同学在某个闲暇的周末决定去野外探险一波,结果在丛林深处中误打误撞进入了一个神秘的洞穴,虽然洞穴中光线昏暗,但小 z 凭借其敏锐的眼力 ...
- 实例学习——爬取豆瓣网TOP250数据
开发环境:(Windows)eclipse+pydev 网址:https://book.douban.com/top250?start=0 from lxml import etree #解析提取数据 ...
- PHP实现支付宝小程序用户授权的工具类
背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过 ...