Vuex 和 localStorage 的区别：理解内存与本地存储的不同

主要区别

1.1 Vuex 存储在内存中

Vuex 是专为 Vue.js 应用程序开发的状态管理模式。它将 数据存储在内存中，使得在组件之间传递数据更加高效。由于内存的读取速度较快，Vuex 能够提供快速的数据响应和传递。

1.2 localStorage 存储在本的文件

相较之下，localStorage 则以文件的方式存储在本地。需要注意的是，它只能存储字符串类型的数据，而存储对象则需要通过 JSON 的 stringify 和 parse 方法进行处理。 由于硬盘的读取速度相对较慢，与内存相比，localStorage 的读写速度会受到一定的影响。

示例：

// Vuex 示例
// 存储数据
this.$store.commit('getInfo', data);
// 读取数据
let data = this.$store.state.data;

// localStorage 示例
// 存储数据
localStorage.setItem('getInfo', JSON.stringify(infoObject));
// 读取数据
let storedData = JSON.parse(localStorage.getItem('getInfo'));

应用场景

2.1 vueX 用于状态管理

Vuex 是为管理Vue.js应用程序中的状态而设计的，通过集中式存储，可以在应用的所有组件之间共享和传递状态。这为开发者提供了一种可预测的方式来管理应用的状态变化。

2.2 localStorage 存储在本的数据

localStorage 主要用于将数据存储到浏览器中，通常在跨页面传递数据时使用。它提供了一种简单而有效的方法，用于不同界面间数据共享。

// Vuex 应用场景
// 在组件中使用 Vuex 中的方法传递数据
this.$store.dispatch('getInfo', data);
                    //方法名    数据

// localStorage 应用场景
// 跨页面获取数据
localStorage.setItem('getInfo', JSON.stringify(data));

永久性

3.1 Vuex 的临时性

刷新页面时，由于数据存储在内存中，Vuex 存储的值会丢失。 这使得 Vuex 更适合管理应用的瞬时状态。

3.2 localStorage 的持久性

localStorage 存储的数据在页面刷新后仍然保留，具有较长的持久性。这使得它成为一个适合存储用户设置和持久化数据的选择。

// Vuex 临时性示例
// 刷新页面后数据重置
this.$store.commit('getInfo');

// localStorage 持久性示例
// 用户首选项在页面刷新后仍然生效
let userPreferences = JSON.parse(localStorage.getItem('getInfo'));

使用方法

4.1 使用 Vuex 进行状态管理（以下是vue2.0 对应的 vueX3.0 使用方法）

npm install vuex --save
//    vue2.0     对应 vuex 3.0
//    vue3.0     对应 vuex 4.0（一般推荐使用pinia）

4.2 接下来，在你的 Vue.js 项目中创建一个 Vuex store 文件，例如 store，store包含modules文件，modules文件包含针对不同项目的.js文件。

4.3 modules文件下的.js文件配置如下

const state = {
	show: true,
    id："9527"
}

const mutations = {
	//修改state
	setLogin(store, data) {
		store.show= data
	}
}


const actions = {
	async getInfo(store, data) {
		store.commit('setLogin', data) //调用mutations的方法修改state的数据
	}
}

export default {
	namespaced: true, //空间命名锁，在 .vue文件 调用方法时需要带上空间命名锁   例如：this.$store.dispatch('login/getInfo',false)
	state,
	mutations,
	actions
}

4.4 getters.js 的具体配置（getters类似与计算属性，可以实时监听数据的变化）

const getters = {
	show: state => state.login.show,
}
export default getters

4.5 inde.js 的具体配置

import Vue from 'vue'
import Vuex from 'vuex'
import login from './modules/login.js'
import menu from './modules/menu.js'
import config from './modules/config.js'
import getters from './getters.js'

//在vuex初始化时导入插件
import createPersistedState from 'vuex-persistedstate';    //持久化插件

Vue.use(Vuex)

const store = new Vuex.Store({
	plugins: [
		createPersistedState({
			paths: ['login', 'config']    //持久化的.js文件内容
		})
	],
	modules: {
		login,
		menu,
		config
	},
	getters
})

export default store

4.6 将 Vuex store 引入并挂载到 Vue 实例上

import App from './App'
import store from './store/index.js'

import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App,
  store
})
app.$mount()

现在便可以在你的.vue文件中进行操作

5.1 使用vueX来管理状态和传递数据

<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{
   
   {title}}</text>
			<view class="">
				<button @click="but">按鈕</button>
			</view>
            <view v-if="show">
                内容是否显示
            </view>
		</view>
	</view>
</template>

<script>
    import {mapGetters} from 'vuex'    //getters的使用方法
	export default {
		data() {
			return {
				title: "HellowWorld"
			}
		},
        computed: {		
			...mapGetters(['show']),
            },
		methods: {
			but() {
				this.$store.dispatch('login/getInfo', false)
                //console.log("", this.$store.state.login.show)
			}
		}
	}
</script>

5.2 使用 localStorage 进行本地存储

<template>
  <div>
    <p>Data from localStorage: {
   
   { storedData }}</p>
    <button @click="updateLocalStorage">Update localStorage</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      storedData: JSON.parse(localStorage.getItem('userData')) || null,
    };
  },
  methods: {
    updateLocalStorage() {
      const data= '';
      localStorage.setItem('userData', JSON.stringify(data));
      this.storedData = data;
    },
  },
};
</script>

总结：Vuex 和 localStorage 分别进行状态管理和本地存储。Vuex 提供了一个集中式的状态管理方案，而 localStorage 则是一个简单的本地存储工具，适用于小量数据的持久化。选择合适的工具取决于你的应用需求和数据规模。

关于vuex-persistedstate 是一个 Vuex 插件，用于在客户端持久化 Vuex 的状态。它利用 HTML5 的 localStorage 或 sessionStorage 来保存和恢复 Vuex 的状态。
当你在一个应用中使用 Vuex 管理状态，你可能会希望在用户关闭并重新打开浏览器后，状态能够被保留。这就是 vuex-persistedstate 的用途。
使用方法如下：
首先，你需要安装 vuex-persistedstate：
```
npm install --save vuex-persistedstate
```
在你的 Vuex store 中导入并使用它（可看4.5）

import Vue from 'vue';  
import Vuex from 'vuex';  
import createPersistedState from 'vuex-persistedstate';  
  
Vue.use(Vuex);

扫描二维码关注公众号，回复： 17466492 查看本文章