vuex怎么存session,具体代码vue3
时间: 2024-03-05 16:47:41 浏览: 16
在 Vue3 中使用 Vuex 存储 session 的代码如下所示:
1. 安装 Vuex
```bash
npm install vuex --save
```
2. 创建 store
在项目中创建一个 store.js 文件,用于创建 Vuex 的 store。
```javascript
import { createStore } from 'vuex';
const store = createStore({
state: {
session: null
},
mutations: {
setSession(state, session) {
state.session = session;
sessionStorage.setItem('session', JSON.stringify(session));
},
clearSession(state) {
state.session = null;
sessionStorage.removeItem('session');
}
},
getters: {
session: state => state.session || JSON.parse(sessionStorage.getItem('session'))
}
});
export default store;
```
3. 在 main.js 中注入 store
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');
```
4. 在组件中使用 session
```javascript
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['session'])
},
mounted() {
// 获取 session
console.log(this.session);
// 设置 session
this.$store.commit('setSession', { token: 'xxxxxx' });
// 清除 session
this.$store.commit('clearSession');
}
}
```
以上代码中,在 Vuex 的 mutations 中,通过 sessionStorage 存储 session,同时在 getters 中获取 session 时,先从 state 中获取,如果 state 中没有,则从 sessionStorage 中获取。在组件中,通过 mapGetters 获取 session,通过 this.$store.commit('setSession', { token: 'xxxxxx' }) 设置 session,通过 this.$store.commit('clearSession') 清除 session。