第一个页面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的更多相关文章

  1. 在vue中使用vuex 一个简单的实例

    1.安装vuex:npm install vuex --save 2.在main.js文件中引入vuex (请忽略其它代码) 3.建一个vuex文件夹,然后在建一个store.js(这两个文件名字可以 ...

  2. 简述Vue中使用Vuex

    1.为什么要用vuex 在vue组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...

  3. Vue学习笔记:Vuex

    为什么需要Vuex 管理共享状态 解决一份数据在多个组件中试用的困难 系统化的状态管理,区别于小型状态过来 底层设计模式: 全局单例模式 应用场景 适合中大型项目: 小项目反而会因为引入更多概念和框架 ...

  4. Vue中Vuex的详解与使用(简洁易懂的入门小实例)

    怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...

  5. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  6. 【翻译】使用Vuex解决Vue中的身份验证

    翻译原文链接:https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex 我的翻译小站:https://www.zcfy ...

  7. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

  8. vue项目中使用vuex

    1.运行 cnpm i vuex -S 2.导入包 import Vuex from 'vuex' 3.注册vuex到vue中 Vue.use(vuex) 4. var store = new Vue ...

  9. vue中怎么使用vuex

    做一个简单的vuex如何使用的介绍: 先安装: npm i vuex --save-dev 新建一个store文件夹, 在store文件夹中建一个index.js文件,在该文件中:         i ...

随机推荐

  1. Python 入门之 内置模块 -- time模块

    Python 入门之 内置模块 -- time模块 1.time模块 ​ time翻译过来就是时间,这个模块是与时间相关的模块 import time # 内置模块 -- 标准库 (1)time.ti ...

  2. Python 入门之 闭包

    Python 入门之 闭包 1.闭包 (1)在嵌套函数内使用(非本层变量)和非全局变量就是闭包 (2)_ closure _ 判断是不是闭包 def func(): a = 1 def foo(): ...

  3. loli的测试-2018.12.9

    模拟赛-2018.12.9 这是NOIP之后第一次模拟赛...但是考的比较悲惨. 非常喜欢写考试总结,不知道为什么... T1:https://www.luogu.org/problemnew/sho ...

  4. Animator通过按键切换动画不及时,动画延时切换问题

    再unity3D版本为Unity 5.2.1f1 (64-bit),再设置动画切换时有一个Has Exit Time属性,由于勾上了这个的原因

  5. Luogu P2756 [网络流24题]飞行员配对方案问题_二分图匹配题解

    二分图模板题 我用的是匈牙利 其实最大流也可以做 #include<iostream> #include<cstdio> #include<cstdlib> #in ...

  6. 在java中读取文件中的内容

    package shi; import java.io.*; public class wenjianIO { public static void main(String agrs[]){ File ...

  7. readline和xreadline的区别

    readline就是直接读取一行 xreadline是生成了一个生成器,遍历的时候才真正生成具体的内容 与range和xrange的区别一样 print range() # 直接创建所有的元素 pri ...

  8. STM32 GPIO相关

    1. STM32 的 IO 作为输入的时候,可以程序设置上下拉电阻(可以不用外接上下拉电阻). 2.GPIO有四种输入模式:浮空输入.上拉输入.下拉输入.模拟输入: 3.GPIO有四种输出模式:开漏输 ...

  9. vb6中word编程总结

    1,在project\references 中加入microsoft word 9.0 object library 2, 启动word    Dim wApp As Word.Application ...

  10. 前端之JavaScript:JS之DOM对象三

    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...