欢迎访问陕西省交通建设集团公司网站家具公司网站源码

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 中的操作。