网站的设计制作流程pc端网站

---

一、vue2

1. 手动存储到localStorage

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)// 本地存储-修改
const storageSet = (key, value) => {localStorage.setItem(key, JSON.stringify(value))
}// 本地存储-获取
const storageGet = (key) => {return JSON.parse(localStorage.getItem(key))
}export default new Vuex.Store({// 数据源 使用：this.$store.state.xxxstate: {user: {} // 用户信息},// 派生数据 使用：this.$store.getters.xxxgetters: {// 获取当前-用户对象GET_USER(state) {state.user = storageGet('STORE_USER') || {}return state.user}},// 更改数据-同步 使用：this.$store.commit('xxx', data)mutations: {// 保存当前-用户对象SET_USER(state, data) {state.user = datastorageSet('STORE_USER', data)}},// mutations装饰器-异步actions: { }
})

---

2. 使用持久化存储插件

store/index.js

提示：vuex持久化存储

import Vue from 'vue'
import Vuex from 'vuex'// Vuex持久化存储
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({storage: window.localStorage
})import otherData from "./modules/otherData.js"Vue.use(Vuex)const state = {}const getters = {}const mutations = {}const actions = {}export default new Vuex.Store({state,getters,mutations,actions,modules: {// 模块命名，要在 js文件 声明namespaced: true才有用otherData,},plugins: [vuexLocal.plugin]
})

store/modules/otherData.js

// state
let state = {// 字典数据dictionaryData: [],
}// getters
let getters = {// 字典数据get_dictionaryData(state) {return state.dictionaryData},
}// mutations，以isShow属性为例
let mutations = {// 字典数据change_dictionaryData(state, data) {state.dictionaryData = data},
}// ctions
let actions = {// 这里有两种写法，本质上一样// 写法1，无参asChangeShow(context) {context.commit('changeShow')},// 写法2，无参// asChangeShow({ commit }) {//     commit('changeShow')// }//有参asChangeName({ commit }, data) {commit('changeName', data)}
}
export default {namespaced: true, // 是否开启模块state,getters,mutations,actions
}

保存到localStorage

App.vue

created() {// 在页面加载时读取localStorage里的状态信息if (localStorage.getItem("store")) {this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("store"))))}// 在页面刷新时将vuex里的信息保存到localStorage里window.addEventListener("beforeunload", () => {localStorage.setItem("store", JSON.stringify(this.$store.state))})
}

---

二、vue3（退出登录时清空vuex及localStorage）

1. index.ts

// store/index.js  
import { createStore } from 'vuex'; // 从 localStorage 中获取初始状态 
const savedState = localStorage.getItem('vuexState');  
const initialState = savedState ? JSON.parse(savedState)  : {}; import globalData from "./modules/globalData"const store = createStore({ state() { return initialState; }, mutations: { clearState(state:any) {// 清空state中的所有数据Objeck.keys(state).forEach(key => {Objeck.keys(state[key]).forEach(childKey => {state[key][childKey] = null}}  // 清空localStoragelocalStorage.clear()}}, actions: { }, getters: { },modules: {globalData,}
}); // 监听状态变化，将状态保存到 localStorage 
store.subscribe((mutation,  state) => { localStorage.setItem('vuexState',  JSON.stringify(state));  
}); export default store; 

2. store/modules/globalData.ts

const state:any = {menuList: []
}
const mutations:any = {change_menuList(state: any, data: any){state.menuList = data}menuList: []
}
export default {namespace: "globalData",state,mutations,
}

使用

<script setup lang="ts"> 
import { useStore } from 'vuex'; const store = useStore(); store.state.globalData.menuList // 获取
store.commit("change_menuList", menu) //更新logout(){store.commit("clearState", menu) //退出登录时清空数据
}</script>

3. 在组件中使用App.vue

<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> 
</template> <script setup> 
import { useStore } from 'vuex'; const store = useStore(); const count = store.getters.getCount;  const increment = () => { store.dispatch('increment');  
}; const decrement = () => { store.dispatch('decrement');  
}; 
</script>