1.如何使用外部js
外部js一般放在 common 目录下
Js代码
//使用vue的函数方法
import Vue from 'vue'
//方法
function a() {
...
return ...;
} function b() {
...
return ...;
}
//公开的方法
module.exports = {
a: a,
bFunction: b
}
引用
//引用单个方法 使用方法 a()
import { a } from '@/common/util.js';
//引用全部 使用方法 util.a()
import util from "@/common/util.js"
2.如何使用外部组件
外部组件一般放在 components 目录下
自写外部组件
//组件使用参数
<video :style="{width,height}" class="video-container" :url="standardUrl" ></video>
//组件参数 props
export default {
props: {
height: {
type: String,
default: '450rpx'
},
standardUrl: {
type: String,
required: true
}
}
}
//组件引用参数
const { standardUrl, height} = this
let url = standardUrl;
引用组件
//导入 videoPlay 为引用名
import videoPlay from '@/components/course/videoPlay.nvue';
export default {
//声明注册使用的组件
components: {videoPlay}
}
//引用名 使用组件
<video-play standardUrl="https://img.cdn.aliyun.dcloud.net.cn/xxx.mp4"></video-play>
3.Store 状态管理
commit 和dispatch的区别在于
commit是提交mutatious的同步操作
dispatch是分发actions的异步操作
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)
commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
store.js
import Vue from 'vue'
// 这里引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// state里面的是全局的属性 应用启动时的初始状态
state:{
num:0,
price:15,
name:'葡萄',
testList:[]
},
// mutations里面的是全局的方法 参数state是固定写法 可以获取参数
// mutations是修改store数据入口
// 用这样的方式去调用 this.$store.commit('xxx');
mutations:{
//可以传递两个参数，第一个值是固定值，第二个值是传递过来的参数
add(state){
state.num++ ;
console.log(state.num)
}
},
// getters是Vuex里的属性计算参数state是固定写法 可以获取参数
// 调用方法 this.$store.getters.count 也可以使用函数辅助函数
// Vuex的计算属性,在视图中当变量使用
// 计算属性依赖一个可变的属性 只要这个属性发生变化 这个函数就会自动执行
// 我们可以认为，【getters】是store的计算属性 用于需要计算的时候
getters:{
count(state){
// 返回一个计算好的值
return state.num*state.price
}
},
// 异步方法 用这样的方式去调用 this.$store.dispatch('xxx'); 也可以使用函数辅助函数
actions:{
//可以传递两个参数，第一个值是固定值，第二个值是传递过来的参数
testActions(context){
// context里面包含了state mutations getters actions的方法及属性可以直接调用
// 执行一些异步的操作或者通用的ajax请求
setTimeout(()=>{
context.state.testList = ['大娃','二娃','三娃','四娃','五娃']
},2000)
}
}
})
html
<template>
<view>
<view>{{ datas }}</view>
<view>数量:{{ num }}</view>
<view>{{ name }}</view>
<view>总价:{{count}}</view>
<button type="primary" @click="add">add</button>
<button type="primary" @click="testActions">testActions</button>
<view>
<view v-for="(item,index) in testList" :key='index'>
{{item}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
datas: '',
// 可以值获取到name的值
name:this.$store.state.name
};
},
onReady() {
this.getajax();
},
computed: {
// 需要在计算属性里面设置
num() {
return this.$store.state.num;
},
count(){
return this.$store.getters.count;
},
testList(){
return this.$store.state.testList;
}
},
methods: {
getajax() {
uni.request({
url: 'https://bird.ioliu.cn/weather', //仅为示例，并非真实接口地址。
data: {
city: '北京'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: res => {
console.log(res.data);
this.datas = res.data.basic.city;
console.log(this.datas);
}
});
},
add() {
// 这里用this.$store.commit(xxx')去调用方法
this.$store.commit('add');
},
testActions(){
this.$store.dispatch('testActions');
}
}
};
</script>
<style lang="scss">
uni-rate {
height: 200px;
}
</style>
挂载到VUE
import store from '@/store/store.js'
const app = new Vue({
store,
...App
})
相关函数
快捷使用
异步 actions this.$store.dispatch('xxx');
同步 mutations this.$store.commit('xxx');
计算 getters this.$store.getters.count
直接使用 this.$store.state.num;
模块化写法
因为是组件中在使用映射 所以从【组件】中导入
import { mapStete, mapMutations,mapActions,mapGetters } from 'vuex'
代码
export default{
data () {
},
computed: {
//引用state的属性 只能写在计算属性computed中 这里可以在数组内写多个方法名
...mapState(['count']),
//也是只能写在computed中，getters其实就是一个包装state的一个函数
//他改变不了state里面的内容 但是会随着state改变而改变 有点类似于计算属性
//调用方法同样为两种 一种为this.$store.getters.名称 第二种为映射{{名称}}
...mapGetters(['funcname'])
},
methods: {
//上一篇提到的触发actions的第二种方式 其实就是这个mapActions的映射方法
...mapMutations(['sub','add']),
//store中actions里面的方法
...mapActions(['subAsync']),
handel1(){
//注意 这里通过映射的函数方法 可以不在此处定义 而直接应用在事件所触发的方法名里面
//比如本来@click触发的handel1 现在可以直接@click sub('自定义的可选参数')
this.sub('自定义的可选参数')
}
}
}
