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={
    setUserInfo(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

如何使用