uniapp中vuex的基本使用
1. 创建一个uniapp项目
2. 在项目目录下用npm安装 vuex
npm install vuex --save
3. 在项目根目录下创建 store文件夹,在store文件夹中创建 index.js
4. 在index.js中显式地通过 Vue.use()
来安装 Vuex:
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
5.在index.js中创建store
5.1 完整的store目录如下:
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑,同步操作
},
actions: {
// 提交mutation,异步操作
},
// 如果将store分成一个个的模块的话,则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// ...
}
});
5.2 导出store
export default store
6. 在main.js 中引入store
vuex的基础用法
index.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({
state: {
// 存放状态
count:0,
test:'这是store.js中的数据'
},
getters: {
// state的计算属性
//用 this.$store.getters.getData()读取
getData(state){
return state;
}
},
mutations: {
// 更改state中状态的逻辑,同步操作
//用 this.$store.commit('function_name',payload) 使用,若无参数则不写payload
add(state,n){
state.count += n;
}
},
actions: {
// 提交mutation,异步操作
}
}) export default store
uniapp中vuex的基本使用的更多相关文章
- uni-app中Vuex的引用
//store 中 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vue ...
- Uni-app中Class绑定与Style绑定
为了节约性能,我们将Class与Style的表达式通过compiler硬编码到uni-app中 支持语法和转换效果如下: Class支持语法: <view :class="{ acti ...
- 对某项目中Vuex用法的分析
上周五刚发布一个线上版本,趁着新的需求和bug还没到来,决定分析一下正在维护的一个使用Vue 2.0 开发的后台管理系统中Vuex部分代码.这部分代码不是我写的,加上我一直在“使用”现成的而不是“搭建 ...
- uniapp中引入less文件
uniapp入门遇到的问题记录 在uniapp中从外部import less文件的话,首先需要在 工具>插件安装 中安装支持less语法的插件,然后在.vue文件中引入 @import url ...
- uni-app中组件的使用
组件基本知识点: uniapp中:每个页面可以理解为一个单页面组件,这些单页面组件注册在pages.json里,在组件关系中可以看作父组件. 自定义可复用的组件,其结构与单页面组件类似,通常在需要的页 ...
- uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果)
通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果) 起始页跳转到对应页面,并传递参数(o ...
- uni-app中websocket的使用 断开重连、心跳机制
前言 最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连.查阅资料后发现了一个心跳机制 ...
- 如何在Uni-app中通过腾讯IM SDK实现社交应用和直播互动等功能
Uni-app想开发社交应用.IM.店铺客服.嵌入式社交模块.在线直播互动,这些功能Uni-app官方也没提供SDK,怎么办呢?找IM老大腾讯云啊,今天我们就在Uni-app中把腾讯云即时通讯TXIM ...
- uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes
1. uniAPP中拿到附件的base64如何操作,如word文件 /*** 实现思路:* 通过native.js的io操作创建文件,拿到平台绝对路径* 再通过原生类进行base64解码,拿到字节流b ...
随机推荐
- 一文看懂JVM内存区域分布与作用
那么我们在开始介绍Java内存区域之前,我们先放一张内存区域的图,方便我们后面介绍的时候可以对照着看. 须知,本文是根据JDK8来介绍的. 程序计数器 首先它是线程私有的,它也称为代码的行号指示器,字 ...
- kivy画个半圆
from kivy.uix.boxlayout import BoxLayout from kivy.app import App class BoxLayoutWidget(BoxLayout): ...
- 常用JAVA API :String 、StringBuilder、StringBuffer的常用方法和区别
摘要 本文将介绍String.StringBuilder类的常用方法. 在java中String类不可变的,创建一个String对象后不能更改它的值.所以如果需要对原字符串进行一些改动操作,就需要用S ...
- 查找最小生成树:克鲁斯克尔算法(Kruskal)算法
一.算法介绍 Kruskal算法是一种用来查找最小生成树的算法,由Joseph Kruskal在1956年发表.用来解决同样问题的还有Prim算法和Boruvka算法等.三种算法都是贪心算法的应用.和 ...
- STP生成树协议在二层环境中的应用
一 STP简介 1.单词: rstp快速生成树协议 filter过滤 protection保护 2.作用: 通过阻塞特定接口来防止二层交换环路,从而做到既可以提高网络可靠性的同时又能避免环路带来的问题 ...
- 并发编程从零开始(十二)-Lock与Condition
并发编程从零开始(十二)-Lock与Condition 8 Lock与Condition 8.1 互斥锁 8.1.1 锁的可重入性 "可重入锁"是指当一个线程调用 object.l ...
- 看动画学算法之:双向队列dequeue
目录 简介 双向队列的实现 双向队列的数组实现 双向队列的动态数组实现 双向队列的链表实现 双向链表的时间复杂度 简介 dequeue指的是双向队列,可以分别从队列的头部插入和获取数据,也可以从队列的 ...
- python基础数据类型语法
#标识符:我们自己在写代码的时候,取的名字.#项目名 project name#包名 package name#模块名 .py ptthon文件名#规范:由字母数字下划线组成,但不能以数字#简明知意: ...
- Swift进阶-内存管理
本文的主要目的是探索 RefCount 的内存结构及强/弱引用计数管理 Swift 中也是采用 ARC 编译器自动内存管理机制. Swift 对象的内存结构是 HeapObject, 有两个属性 Me ...
- pip 安装使用 ImportError: No module named setuptools 解决方法
安装过程详见这篇博客: http://www.ttlsa.com/python/how-to-install-and-use-pip-ttlsa/ 安装后运行到:python setup.py ins ...