vuex：store传值/组件之间相互调用方法

悠悠 2022-11-04 12:24 578阅读 0赞

> 赋值 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)
>     		})
>     	},
> 
> [https://www.cnblogs.com/sunsanfeng/p/emit.html][https_www.cnblogs.com_sunsanfeng_p_emit.html]

> 其它全局变量的引入：[https://www.cnblogs.com/yangchin9/p/11002636.html][https_www.cnblogs.com_yangchin9_p_11002636.html]
> 
>                                 [https://www.cnblogs.com/hpx2020/p/10936279.html][https_www.cnblogs.com_hpx2020_p_10936279.html]

一、什么是vuex

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2OTQ2ODAz_size_16_color_FFFFFF_t_70][]

二、优点

共享数据、易于维护

数据共享、提高开发速度

各个组件之间的数据都是实时同步的

三、什么场景使用

组件之间共享的数据

四、引入和使用

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

五、

[https_www.cnblogs.com_sunsanfeng_p_emit.html]: https://www.cnblogs.com/sunsanfeng/p/emit.html
[https_www.cnblogs.com_yangchin9_p_11002636.html]: https://www.cnblogs.com/yangchin9/p/11002636.html
[https_www.cnblogs.com_hpx2020_p_10936279.html]: https://www.cnblogs.com/hpx2020/p/10936279.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2OTQ2ODAz_size_16_color_FFFFFF_t_70]: /images/20221023/2bc94001161d421bab54b0941548e782.png