Vue开发中使用vuex-数据持久化插件store-案例

Posted 2022-04-15 JackieDYH

store是存储数据到本地浏览器 

安装

npm install store -save

使用

// 存储变量到user键
store.set('user',  name:'Marcus' )
 
//获取内容
store.get('user')
 
// 删除键
store.remove('user')
 
// 清除所有的键
store.clearAll()
 
// 循环显示所有的键值对
store.eachEach(function(key, value) 
	console.log(key, '==', value)
)

使用案例

import storage from 'store'

const maas = 
    state: 
        isLogin: storage.get('isLogin') || false,
        userMaas: storage.get('userMaas') || ,
    ,
    mutations: 
        setisLogin(state, value) 
            state.isLogin = value;
            storage.set('isLogin', value);
            // storage.remove('isLogin');
        ,
        setUserMaas(state, value) 
            state.userMaas = value;
            storage.set('userMaas', value);
        ,
        clearUserMaas(state) 
            state.userMaas = ;
            storage.remove('userMaas');
        
    ,
    actions: 
        isLoginSync( commit , value) 
            commit("setisLogin", value);
        ,
        setUserMaasSync( commit , value) 
            commit("setUserMaas", value);
        ,
        clearUserMaasSync( commit ) 
            commit("clearUserMaas");
        
    ,
    getters: 
        isLogin: state => state.isLogin,
        userMaas: state => state.userMaas,
    


export default maas

<template>
  <page-header-wrapper>
    <div class="mslogin">
      <div class="top">
        <p @click="isLoginSync(!isLogin)"> isLogin </p>
        <span @click="clearUserMaasSync">账户信息: userMaas ,是否登录: isLogin </span>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
import  mapGetters, mapActions  from 'vuex'
export default 
  name: 'Mslogin',
  data() 
    return 
      
    
  ,
  created() ,
  computed: 
    ...mapGetters(['isLogin', 'userMaas']),
  ,
  mounted() ,
  methods: 
    ...mapActions(['isLoginSync', 'setUserMaasSync', 'clearUserMaasSync']),
    async getAccount() 
      let account = await this......()
      let parames = await this......()
      
      this.setUserMaasSync(
        address: parames.address,
        sign: parames.signature,
      )
      this.isLoginSync(true)
      console.log(parames)
    ,
  ,

</script>