uniapp使用vuex状态管理器实现持久化存储

m0_64931981

已于 2023-09-01 11:17:05 修改

阅读量601

点赞数

文章标签： vue.js javascript 前端 uniapp

于 2023-08-24 17:04:29 首次发布

本文链接：https://blog.youkuaiyun.com/m0_64931981/article/details/132478026

版权

本文介绍了如何在uniapp项目中使用Vuex进行状态管理，包括安装、store结构、Vue组件中使用mutations、actions和getters，以及如何利用uni.setStorageSync和localStorage进行数据持久化存储和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步当然要先安装vuex：npm install vuex

先创建一个store文件夹在根目录，然后再store文件夹里面创建index.js，再在里面创建vuex的store实例，代码如下（代码所示的是uniapp实现持久化存储，使用的uni.setStorageSync，如果想要使用localStorage来实现存储，就替换为localStorage.setItem）

接下来就是在vue文件里面的使用

    import store from '../../store/index.js'//引入store实例
	const vuexStore = store
	vuexStore.commit('RECEIVECODE', code.value)//在vue文件使用mutations的方法使用commit
	vuexStore.dispatch('receiveCode', code.value)//在vue文件使用actions的方法使用dispatch
	vuexStore.getters.code//在vue文件中使用getters获取state的数据


    //uniapp里面存储的语句
    uni.setStorageSync('user_code', JSON.stringify(state.code));//存储信息
    uni.getStorageSync('user_code');//获取信息
    uni.removeStorageSync('user_code');//删除存储的信息

    //localStorage的语句
    localStorage.setItem('key', 'value');//存储数据
    localStorage.getItem('key');//获取数据
    localStorage.removeItem('key');//删除数据
    localStorage.clear();//清除数据