vuex:store传值/组件之间相互调用方法
一、什么是vuex二、优点共享数据、易于维护数据共享、提高开发速度各个组件之间的数据都是实时同步的三、什么场景使用组件之间共享的数据四、引入和使用4.1、在根目录下创建store/index.js 文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {},..
赋值 this.$store.commit('add', 3);
异步赋值 this.$store.dispatch('addAsync')
计算属性取值 this.$store.getters.方法名
取值 this.$store.state.全局变量名称
var Event = new Vue(); 相当于又new了一个vue实例,Event中含有vue的全部方法;
Event.$emit('msg',this.msg); 发送数据,第一个参数是发送数据的名称,接收时还用这个名字接收,第二个参数是这个数据现在的位置;methods:{ getLogin(){ uni.$emit('play-video', { status: 'open', }) }, }
Event.$on('msg',function(msg){ 接收数据,第一个参数是数据的名字,与发送时的名字对应,第二个参数是一个方法,要对数据的操作
//逻辑区
})created() { uni.$on('play-video', (data) => { console.log("我是appId:"+this.$customConfig.appId) }) },
一、什么是vuex
二、优点
共享数据、易于维护
数据共享、提高开发速度
各个组件之间的数据都是实时同步的
三、什么场景使用
组件之间共享的数据
四、引入和使用
4.1、在根目录下创建 store/index.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
getters: {
}
})
export default store
4.2、在 main.js 中引入 store/index.js 文件
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.prototype.$store = store
//挂载
const app = new Vue({
store,
...App
})
app.$mount()
4.3、使用
4.3.1、所有的共享数据都要统一放到store的state中进行存储
4.3.2、组件访问state数据
4.3.2.1、第一种: this.$store.state.全局变量名称
4.3.2.2、第二种: 从vuex中按需导入mapState函数
//引入mapGetters
import { mapGetters } from 'vuex'
//按需导入参数
computed: {
...mapGetters([
'count',//需要的参数
]),
},
4.3.3、赋值(mutations): 用于变更Store中的数据(只有mutations才有变更Store数据的权限)。
4.3.3.1、第一种:调用mutations中的方法: this.$store.commit('add', 3);//add为mutations中的一个方法;3为传值
4.3.3.2、第二种:
import{ mapMutations } from 'vuex'
export default {
computed:{
...mapMutations([
'addN'
]),
},
methods:{
test(){
this.addN(3) // addN为请求方法、3为请求参数
}
},
}
4.3.3.3、 mutations 中不允许写异步代码 不如定时器
如果非要使用异步操作可以选择使用actions
4.3.4、异步操作(actions):
actions: {
addAsync(context){
stTimeout(() =>{
context.commit('add')
}, 1000)
}
}
4.3.4.1、第一种: this.$store.dispatch('addAsync')
4.3.4.2、第二种:
import{ mapActions } from 'vuex'
export default {
computed:{
...mapActions([
'addN'
]),
},
methods:{
test(){
this.addN(3) // addN为请求方法、3为请求参数
}
},
}
4.3.5、计算属性(getters):
4.3.5.1、第一种: this.$store.getters.方法名
4.3.5.2、第二种: import { mapGetters } from 'vuex'
4.4、取值(mapState):
import{ mapGetters, mapMutations, mapState } from 'vuex'
export default {
computed:{
...mapState([
'userInfo',
]),
},
}
userInfo.avatarUrl
五、
更多推荐
所有评论(0)