vuex使用
vuex共有state、mutations、actions、getters、modules五个模块
1.创建文件
在项目根目录下创建store文件夹，在其内新建一个文件index.js，在index.js对vuex进行初始化。
// 导入vuex
import Vuex from 'vuex'
// 导入Vue
import Vue from 'vue'
// 使用Vuex
Vue.use(Vuex)
// 导出Vuex
export default new Vuex.store({
//定义数据
state,
//改变数据
mutations,
//异步操作
actions,
//计算
getters,
//模块
modules
})
2.在main.js文件中导入vuex，并定义全局$store
import store from './store/index.js'
Vue.prototype.$store=store;3.state定义数据
state:{
gTitle:{
text:"你好Vuex",
color:"#000",
fontSize:"24px",
background:"#f70"
},
},<template>
<view>
<view :style="gTitle">
{
{$store.state.gTitle.text}}
</view>
</view>
</template>
<script>
import {mapState} from 'vuex';
export default {
data() {
return {
}
},
methods: {
...mapActions(["getJok"])
},
computed: {
// 把全局的vuex数据转换为组件计算出来的只读的
...mapState(["gTitle"]),
}
}
</script>
<style>
</style>
4.mutations改变状态
mutations:{
// 更改字体大小
setSize(state,data){
state.gTitle.fontSize=data+'px'
},
// 更改背景颜色
setBackgroundColor(state,data){
state.gTitle.background=data;
},
},
5.actions异步操作
state:{
joks:[],
},
mutations:{
// 更新笑话数据
setJoks(state,data){
state.joks=data;
}
},
// 异步api操作
actions:{
// 和后端交互，异步操作都会放在actions中
getJok(context,data){
uni.request({
url: 'http://xxx.com/mi/list.php',
method:"get",
data:data,
// axios get请求传参用的params, post用data
// uni.request post与get传参也是用data
// 更加content-type如果是application/json
// 那么data是jison如果是urLencoeded data就是url编码形式
success: (res) => {
console.log(res.data);
// actions去调用mutations
context.commit("setJoks",res.data.result);
}
});
}
},<script>
export default {
data() {
return {
}
},
onLoad() {
this.$store.dispatch("getJok",{page:1})
},
}
</script>
6.getters内部计算
state:{
joks:[],
},
// 改变状态的唯一方法
mutations:{
// 更新笑话数据
setJoks(state,data){
state.joks=data;
}
},
// 异步api操作
actions:{
// 和后端交互，异步操作都会放在actions中
getJok(context,data){
uni.request({
url: 'http://xxx.com/mi/list.php',
method:"get",
data:data,
// axios get请求传参用的params, post用data
// uni.request post与get传参也是用data
// 更加content-type如果是application/json
// 那么data是jison如果是urLencoeded data就是url编码形式
success: (res) => {
console.log(res.data);
// actions去调用mutations
context.commit("setJoks",res.data.result);
}
});
}
},
// 内部计算
getters:{
// 计算所有笑话字数总和
"totalLen":function(state){
// reduce累计()
var count=0;
for(var i=0;i<state.joks.length;i++){
count+=state.joks[i].summary.length;
}
return count;
}
},<template>
<view>
<view>总 {
{$store.state.joks.length}}条笑话</view>
<view>{
{totalLen}}字</view>
<view class="item" v-for="item in $store.state.joks">
{
{item.summary}}
</view>
</view>
</template>
<script>
import {mapActions,mapGetters} from 'vuex';
export default {
data() {
return {
}
},
onLoad() {
this.getJok();
},
methods: {
...mapActions(["getJok"])
},
computed: {
...mapGetters(["totalLen"])
}
}
</script>
常用api
1.uni.getSystemInfoSync() 获取系统信息
<template>
<view>
<view>屏幕宽高：{
{info.screenWidth}},{
{info.screenHeight}}</view>
<view>系统：{
{info.osName}}</view>
<view>品牌：{
{info.model}}</view>
<view>可以使用窗口的顶部位置{
{info.windowTop}}</view>
<view>安全区域 {
{JSON.stringify(info.safeArea)}}</view>
<view>安全区域 {
{JSON.stringify(info.safeAreaInsets)}}</view>
</view>
</template>
<script>
export default {
data() {
return {
info: {},
}
},
onLoad() {
// 获取系统信息
const info = uni.getSystemInfoSync();
this.info = info;
console.log(info);
// 存储api
uni.setStorageSync("info", info);
},
}
</script>
2.uni.getMenuButtonBoundingClientRect() 获取胶囊按钮的边界
一般用于微信小程序
<template>
<view>
<!-- #ifdef MP -->
<view>胶囊微信小程序</view>
<view>导航栏高度 {
{(menuButtonInfo.top-info.statusBarHeight)*2+menuButtonInfo.height}}</view>
<view>胶囊 {
{JSON.stringify(menuButtonInfo)}}</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {},
}
},
onLoad() {
// 获取胶囊按钮的边界
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.menuButtonInfo = menuButtonInfo;
console.log(menuButtonInfo);
},
}
</script>
3.上传图片
<template>
<view>
<view>图片操作</view>
<view>选择与预览图片</view>
<button @click="selectPic">选择</button>
<view v-for="item in list" :key="item" @click="preview(item)">
<image :src="item"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
}
},
methods: {
selectPic() {
var that = this;
// 选择图片
uni.chooseImage({
count: 3, // 默认选3张
success(res) {
// 遍历结果
for (let i = 0; i < res.tempFilePaths.length; i++) {
uni.uploadFile({
// 上传地址
url: 'http://520mg.com/ajax/file.php', //仅为实例，非真实接口
// 图片信息
filePath: res.tempFilePaths[i],
// name需要和后端约定，默认都会叫file
name: 'file',
success: result => {
// 转换为json
var data = JSON.parse(result.data);
// 添加域名后加入list
that.list.push('http://520mg.com' + data.pic);
}
})
}
// 上传到服务器
}
})
},
preview(item) {
var that = this;
// 预览的图片列表
uni.previewImage({
urls: this.list,
current: item, // 当前图片
longPressActions: {
// 定义长按的按钮
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log("选中了第" + (data.tapIndex + 1) + "个按钮，第" + (data.index + 1) + "张图片");
// 保存
if (data.tapIndex == 1) {
uni.saveImageToPhotosAlbum({
filePath: that.list[data.index],
success() {
uni.showToast({
title: "保存成功"
})
}
})
}
// 分享
if (data.tapIndex == 0) {
// 分享给朋友（app打包时候分享 要去微信的开发平台注册）
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 2,
imageUrl: that.list[data.index],
success: function(res) {
console.log("success" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail" + JSON.stringify(err));
}
});
}
},
fail: function(err) {
console.log(err.errMsg);
}
}
})
}
}
}
</script>
组件
1.自定义组件
创建并导入组件
组件传参
父传子：
子传父：
2.第三方插件
uni-app官网扩展组件（uni-app官网）
uView组件
使用uView需要先导入插件
uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场
然后按照下方链接中的步骤配置成功即可使用