vue中store状态管理 映射

一、在主目录下新建一个store目录。

二、在store目录下新建一个js文件，文件内容如下。

三、需要在main.js中将此状态管理挂载到全局

import store from '@/store/info.js'
uni.$store = store

const app = new Vue({
    store,
    ...App
})

四、获取store中的数据

一共有三种方法可以访问info.js文件。

①直接通过this.$store.state.nickname方式就可访问到store中的nickname的值。

    通过this.$store.commit('addAge', {number: 5})方式调用store里的同步方法。

    通过this.$store.dispatch()方式调用store里的异步方法。

②通过计算属性，直接通过{{nickname}}访问store里state里的属性。

computed:{
             nickname(){
                 return this.$store.state.nickname;
             }

 }

③通过辅助函数mapState、mapGetters、mapMutations、mapActions

记住：用mapState等这种辅助函数的时候，前面的方法名和获取的属性名是一致的。

computed: {
            ...mapState(['nickname', 'age', 'gender']),
            ...mapGetters(['realname', 'money_us']),   
        }

methods: {

        ...mapMutations(['addAge']),

}

<template>里就可以直接通过{{nickname}},addAge({number:5})访问，在methods里就可以通过this.addAge({number:5})访问。