vuex存储数据与改变数据

vuex优劣势vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。为了克服这个问题,vuex-persistedstate出现了~~原理:将vuex的state存在localStorage或sessionStorage或cookie中一份刷新页面的一瞬间...

vuex存储数据与改变数据
vuex优劣势

vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。
vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。
为了克服这个问题, vuex-persistedstate出现了~~
原理:
将vuex的state存在localStorage或sessionStorage或cookie中一份
刷新页面的一瞬间,vuex数据消失,vuex回去sessionStorage中哪会数据,变相的实现了数据刷新不丢失~

vuex基本对象

vuex中,有默认的五种基本的对象:
1.state:存储状态(变量)
2.getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 sotre.getters.fun()3.mutations:修改状态,并且是同步的。在组件中使用sotre.getters.fun()3.mutations:修改状态,并且是同步的。在组件中使用sotre.getters.fun()3.mutations:修改状态,并且是同步的。在组件中使用store.commit(‘fun()’,params)。这个和我们组件中的自定义事件类似。
4.actions:异步操作。在组件中使用是$store.dispath(‘fun()’,params)
5.modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。

操作步骤

1.安装vuex依赖和vuex-persistedstate依赖
npm install vuex -s (状态管理)
npm install vuex-persistedstate -d (将vuex数据存储到localStorage)
2.新建src/store/index.js和src/store/modules/temp.js
在这里插入图片描述
3.src/store/index.js中引用vuex和vuex-persistedstate及创建vuex并暴露

import Vue from 'vue'import Vuex from 'vuex'import temp from '@/store/modules/temp'import createPersistedSatte from 'vuex-persistedstate'Vue.use( Vuex );const store = new Vuex.Store({ modules: {  temp, }, state: { }, getters: { }, mutations: { }, plugins: [createPersistedSatte()]});export default store

4.src/store/modules/temp.js用state定义数据和封装方法并暴露

const tempInfo = {// state定义数据相当于实力中的data state: {  tempData: {},  message:"程女士" }, mutations: {  SET_TEMP_DATA(state, tempData) {state.tempData = tempData  },  SELF(state, tempData) {state.message = tempData  } }, actions: {  SetData({ commit }, tempData) {commit('SET_TEMP_DATA', tempData);  },  SetMassage({ commit }, tempData) {commit('SELF', tempData);  } }, getters: {  tempData: (state) => {return state.tempData  },  messages:(state) => {return state.message  } }}export default tempInfo

在这里插入图片描述
5.在想使用的.vue单文件中使用

<template>  <div> // getters获取并渲染 {{this.$store.getters.messages}}  //dispatch操作数据 <button @click="change">改变</button>  </div></template>
<script>export default {  methods:{ change(){ // 点击按钮让程女士变成封先生,此时刷新页面依然是封先生,存储在localStorage必须手动清除。this.$store.dispatch('SetMassage','封先生')console.log(this.$store.getters.message) }  }}</script>

再来看之前的temp.js中的函数名,在新页面获取和修改中所使用。
在这里插入图片描述
在这里插入图片描述

源文地址:https://www.guoxiongfei.cn/csdn/7537.html
0