当前位置：首页 > news >正文

uniapp vue2 vuex 持久化

news 2025/8/22 11:20:55

1.vuex的使用

一、uniapp中有自带vuex插件，直接引用即可

二、在项目中新建文件夹store,在main.js中导入

在根目录下新建文件夹store,在此目录下新建index.js文件
在这里插入图片描述
index.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变},mutations: {//相当于同步的操作},actions: {//相当于异步的操作,不能直接改变state的值，只能通过触发mutations的方法才能改变}
})
export default store

在main.js中导入挂载vuex

import Vue from 'vue'
import App from './App'
import store from './pages/store/index.js'
Vue.prototype.$store = storeVue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({store,...App
})
app.$mount()

2.使用

第一种方式：this. $s t ore 直接操作例如当取值：直接在页面中使用 t hi s .$ store.state.变量名

第二种方法：mapState, mapGetters, mapActions, mapMutations

<template><view class="content"></view>
</template><script>import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'//导入export default {data() {return {}},computed: { //computed中注册...mapGetters(['text1']),...mapState(['text1'])}methods: {...mapMutations([]),...mapActions([])}}
</script><style>
</style>

3.vuex持久化

问题：

H5应用中存在Vuex中的数据在刷新页面后丢失了。

原因：

Vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 Vue 实例，Vuex数据会重新初始化，导致页面刷新Vuex中的数据丢失的问题。

解决：

使用 vuex-persistedstate 插件
1、在项目目录下执行：npm install --save vuex-persistedstate；
2、修改store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from "vuex-persistedstate"Vue.use(Vuex)const store = new Vuex.Store({plugins: [persistedState({storage: {getItem: key => uni.getStorageSync(key),setItem: (key, value) => uni.setStorageSync(key, value),removeItem: key => uni.removeStorageSync(key)}})],state:{//存放状态"username":'',"userid":''},mutations:{//...},actions:{//...},//...
})export default store