uni-app 学习笔记:Vuex 持久化数据
Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
uni-app 支持使用 Vuex 进行全局状态管理,可以将应用程序的共享状态存储在 Vuex 中,以便在整个应用程序中进行共享和访问。
Vuex 的数据持久化
uni-app 内置了 Vuex ,所以我们只需按照规则创建调用即可:
1.在项目根目录下创建文件夹 store ,并在此目录下新建 index.js 文件
import {createStore
} from 'vuex';export default createStore({state: {loggedIn: uni.getStorageSync('isLogged') || false,userinfo: uni.getStorageSync('userinfo')},mutations: {setLogin(state, userData) {state.loggedIn = truestate.userinfo = userDatauni.setStorageSync('isLogged', true)uni.setStorageSync('userinfo', userData)},logout(state) {state.loggedIn = falsestate.userinfo = nulluni.removeStorageSync('isLogged')uni.removeStorageSync('userinfo')}},actions: {}
});
2.在 main.js 中导入文件。
import App from './App'
import {httpRequest
} from './request/request.js'
import store from './store/index.js' // 页面路径// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
Vue.prototype.$httpRequest = httpRequest
Vue.prototype.$store = store // 配置仓库(store)
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import {createSSRApp
} from 'vue'
export function createApp() {const app = createSSRApp(App)app.use(store) // 使用仓库(store)return {app}
}
// #endif
获取 state ,通过 this.$store 访问到 state 里的数据。
// 获取存在本地的用户登录状态
console.log(this.$store.state.loggedIn)
修改登录状态:
this.$store.commit('setLogin', {'id': '1','nickname': '张三'});
Vuex 中 store 数据改变的唯一方法就是 mutation 。this.$store.commit 是 Vuex 提供的方法,用于提交一个 mutation。
setLogin 是一个 mutation 的名称,它接受两个参数:state 和 userData。state 是 Vuex 中的状态对象,而 userData 则是传入的数据(登录App后需要持久化的用户信息)。在页面中调用了名为 setLogin 的 mutation ,并传入了 {'id': '1', 'nickname': '张三'} 作为参数存储。这样就完成了将数据存储到 Vuex 的 store 中的操作。