store——数据存储

目录

一、目录

 二、cashe.js

三、user.js

四、commonStore.js

五、index.js

六、页面

---

一、目录

 二、cashe.js

此页面就是对数据的增加和删除改变进行封装

/*
 * @Author: li2022 [email protected]
 * @Date: 2022-01-25 11:13:05
 * @LastEditors: li2022 [email protected]
 * @LastEditTime: 2022-08-15 15:42:21
 * @FilePath: \sanxingdui_cms\src\store\cache.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
const cache = {}

export default {
	getStorage(key) {
		let data = undefined;
		data = sessionStorage.getItem(key) || undefined
		try {
			data = JSON.parse(data)
		} catch (e) {
		}
		return data
	},
	
	setStorage(key, data) {
		let json = "";
		try {
			json = JSON.stringify(data);
		} catch (e) {
			json = data
		}
		sessionStorage.setItem(key, json);
	},
	
	deleteStorage(key) {
		sessionStorage.removeItem(key)
	}
}

三、user.js

import cache from "../cache";
let stateEnum = {
	userName:'USERNAME',
		token:'TOKEN'
}
const user = {
	state:{
		userName:cache.getStorage(stateEnum.userName) ? cache.getStorage(stateEnum.userName) : 'fafa'
	},
	getters:{
	},
	mutations: {
		changeUserName(state,agr2){
			state.userName = agr2    //写这句话可以直接改变当前页面的值
			cache.setStorage(stateEnum.userName,agr2)   //保存数据，使刷新时上面取值有值可以取
		},
	},
}
export default user

四、commonStore.js

import cache from "../cache"
let stateEnum={
    loading:'LOADING'
}
const commonStore={
    state:{
        loading:cache.getStorage(stateEnum.loading) ? cache.getStorage(stateEnum.loading) : "loading数据"
    },
    mutations:{
        changeLoading(state) {
            state.loading=''    //''   und  0 null
            cache.deleteStorage(stateEnum.loading)
        },
        changeLoadinged(state,arg) {
            state.loading=arg
            cache.setStorage(stateEnum.loading,arg)
        }
    }
}
export default commonStore

五、index.js

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
import user from './modules/user.js'
import commonStore from "./modules/commonStore";
const store=new Vuex.Store({
	modules:{
		user,
		commonStore
	}
})
export default store

六、页面

methods: {
			fnn (){
				this.$store.commit("changeUserName",'改变数据')
			}，
            del(){
                this.$store.commit("changeLoading")
            }
		},