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

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>