在mpvue或者Vue中使用VUEX
第一个页面Index,主页哦
import Vue from'vue'
import Vuex from'vuex' import getters from'./getters'
import state from'./state'
import actions from'./actions'
import mutations from'./mutations'
import createLogger from'vuex/dist/logger' Vue.use(Vuex) constdebug=process.env.NODE_ENV!=='production' export default newVuex.Store({
getters,
state,
actions,
mutations,
strict:debug,
plugins:debug?[createLogger()]:[]
})
第二个页面
state页面,用来存放数据的
const state={
modelConfig:{
}
}
export default state
第三个页面
getters页面,用来获取vuex数据的
const getters={
modelConfig(state){
returnstate.modelConfig
}
} export default getters
第四个页面
mutations页面,用来同步处理数据的,一些逻辑要写在这里
import {MODEL_CONFIG} from'./mutation-type' export default{
[MODEL_CONFIG](state,value){
console.log('state',state)
state.modelConfig=value
}
}
第五个页面
mutations-type,用来给mutations中方法定义函数名的,可用,可不用,如果不用的话,mutaitons直接写函数名就行了
export const MODEL_CONFIG='MODEL_CONFIG'
第六个页面
acitons页面,这个是处理异步数据的,其实就是异步的使用mutations里面的方法,不过我没用到
const actions={
modelAction(context,num){
context.commit('MODEL_CONFIG',num)
}
} export default actions
至此,页面已经建立完毕了,下面开始使用
引入方式一 vue
引入方式二 mpvue ,这里防止辅助函数mapGetters等报错,通过原型的方式绑定store
开始正式使用了,引入之后就需要要用到vuex封装的语法糖
第一步 | 使用vuex中保存的数据
1)引用语法糖 import{mapGetters}from"vuex";
2)在computed中使用mapgetters方法
computed:{ //获取state里面的数据 ...mapGetters(['modelConfig']) },
3)是想要的地方直接用this.就可以使用,比如我在小程序的onload生命周期使用
onLoad(){ console.log('vuex',this.modelConfig) },
第二步 | 处理vuex中的数据
1)引入语法糖
import{mapMutations}from"vuex";
2)在methods中使用mapmutations
...mapMutations({ 'sendVueX':'MODEL_CONFIG' }), 如果要传参的话直接在vue界面的click中带入就行 button.button-t(@click="sendVueX('10')")
发送vuex 主要还是mutations 和actions两个页面吧,需要做数据操作的,操作数据用的
参考文档之一:
https://juejin.im/post/5c2043efe51d4536475bded4
在mpvue或者Vue中使用VUEX的更多相关文章
- 在vue中使用vuex 一个简单的实例
1.安装vuex:npm install vuex --save 2.在main.js文件中引入vuex (请忽略其它代码) 3.建一个vuex文件夹,然后在建一个store.js(这两个文件名字可以 ...
- 简述Vue中使用Vuex
1.为什么要用vuex 在vue组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...
- Vue学习笔记:Vuex
为什么需要Vuex 管理共享状态 解决一份数据在多个组件中试用的困难 系统化的状态管理,区别于小型状态过来 底层设计模式: 全局单例模式 应用场景 适合中大型项目: 小项目反而会因为引入更多概念和框架 ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- vueX、vue中transition的使用、axios
引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!
- 【翻译】使用Vuex解决Vue中的身份验证
翻译原文链接:https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex 我的翻译小站:https://www.zcfy ...
- vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...
- vue项目中使用vuex
1.运行 cnpm i vuex -S 2.导入包 import Vuex from 'vuex' 3.注册vuex到vue中 Vue.use(vuex) 4. var store = new Vue ...
- vue中怎么使用vuex
做一个简单的vuex如何使用的介绍: 先安装: npm i vuex --save-dev 新建一个store文件夹, 在store文件夹中建一个index.js文件,在该文件中: i ...
随机推荐
- Python 入门之 内置模块 -- time模块
Python 入门之 内置模块 -- time模块 1.time模块 time翻译过来就是时间,这个模块是与时间相关的模块 import time # 内置模块 -- 标准库 (1)time.ti ...
- Python 入门之 闭包
Python 入门之 闭包 1.闭包 (1)在嵌套函数内使用(非本层变量)和非全局变量就是闭包 (2)_ closure _ 判断是不是闭包 def func(): a = 1 def foo(): ...
- loli的测试-2018.12.9
模拟赛-2018.12.9 这是NOIP之后第一次模拟赛...但是考的比较悲惨. 非常喜欢写考试总结,不知道为什么... T1:https://www.luogu.org/problemnew/sho ...
- Animator通过按键切换动画不及时,动画延时切换问题
再unity3D版本为Unity 5.2.1f1 (64-bit),再设置动画切换时有一个Has Exit Time属性,由于勾上了这个的原因
- Luogu P2756 [网络流24题]飞行员配对方案问题_二分图匹配题解
二分图模板题 我用的是匈牙利 其实最大流也可以做 #include<iostream> #include<cstdio> #include<cstdlib> #in ...
- 在java中读取文件中的内容
package shi; import java.io.*; public class wenjianIO { public static void main(String agrs[]){ File ...
- readline和xreadline的区别
readline就是直接读取一行 xreadline是生成了一个生成器,遍历的时候才真正生成具体的内容 与range和xrange的区别一样 print range() # 直接创建所有的元素 pri ...
- STM32 GPIO相关
1. STM32 的 IO 作为输入的时候,可以程序设置上下拉电阻(可以不用外接上下拉电阻). 2.GPIO有四种输入模式:浮空输入.上拉输入.下拉输入.模拟输入: 3.GPIO有四种输出模式:开漏输 ...
- vb6中word编程总结
1,在project\references 中加入microsoft word 9.0 object library 2, 启动word Dim wApp As Word.Application ...
- 前端之JavaScript:JS之DOM对象三
js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...