uniapp中使用vuex(store)模块,

定义模块

定义模块有很多方式，这里在store目录里新建了一个名叫user.js的文件，详看代码注释。

//本地存储的key
const USER_KEY = 'userinfo';

const state = {
  //初始化数据，优先从本地存储获取
    userInfo : uni.getStorageSync(USER_KEY) || {},
}

//actions可以支持异步操作，这里使用异步存储，存储成功后再commit
const actions = {
    setUserInfo({commit},payload) {
        uni.setStorage({
            key:USER_KEY,
            data:payload,
            success: () => {
                commit("set_userinfo",payload);
            }
        })
    },
};
//真正的缓存数据改变的地方
const mutations={
    set_userinfo(state,data){
        state.userInfo = data;
    },
}
//导出
export  default {
    state,
    actions,
    mutations
}

模块注册

修改index.js文件引入模块并注册

import Vue from 'vue'
import Vuex from 'vuex'
//导入模块
import user from './user'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
    },
    
    modules:{
        //注册模块
        user,
    }
})

export default store

如何使用

<script>
    import {mapActions, mapState} from 'vuex'
export default {
        computed: {
            ...mapState({
                // 这里可以通过这种方式引用相应模块的state数据，其中user是模块名。
                // 在代码的其他部分可以使用this.userInfo访问数据
                userInfo: ({user}) => user.userInfo,
            }),
        },
        data() {
            return {};
        },
        methods:{
            /* 这里是导入模块的actions，其中setUserInfo是我们在user模块中定义的。
注意，中括号是必须的。当要导入多个的时候可以在中括号中添加，以数组的形式传给mapActions。
在代码中我们就可以this.setUserInfo的方式访问在vuex中的函数。*/
            ...mapActions(['setUserInfo']),
        },
        onLoad(){}
    }
</script>