vuex

最新推荐文章于 2024-05-22 01:00:00 发布

PicriL@Shmily

最新推荐文章于 2024-05-22 01:00:00 发布

阅读量425

点赞数

分类专栏：面试题文章标签： vue

本文链接：https://blog.csdn.net/ikun__/article/details/117199508

版权

面试题专栏收录该内容

35 篇文章

订阅专栏

Vuex是Vue.js应用的状态管理模式，包括state、mutations、actions、getters和modules等核心部分。文章介绍了如何使用map的高级语法简化操作，并详细探讨了Vuex结合localStorage实现状态持久化的步骤，确保数据在页面刷新后仍能恢复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流它由五部分组成，分别是：state,actions,mutations,getters,modules

在这里插入图片描述

2.vuex的五大核心：

state: 所有的数据都存储在state中， state是一个对象
mutations: 唯一可以修改state数据的场所
actions:可以包含异步操作只能调用mutations的方法
getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存），做一些逻辑性操作
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

3.map的高级语法

(1) 有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters

(2) 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

(3) 如何使用

<template>
 <div id="">
   {{ token }}
   {{ token - x }}
 </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

import {createNamespacedHelpers} from 'vuex'

const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')

const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')



export default {
 name: '',
 data() {
   return {}
 },
 computed: {
   ...mapState({
     token: 'token'
   }),
   ...mapGetters(['token-x']),
   ...mapSateUser(['userid']),
   ...mapStateCart({cartid:'userid'})
 },
 //生命周期 - 创建完成（访问当前this实例）
 created() {
   this.setToken('123456')
 },
 //生命周期 - 挂载完成（访问DOM元素）
 mounted() {},
 methods: {
   ...mapActions({
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({
   setId:"setToken"
  })
 }
}
</script>

4.vuex结合localStorage实现状态持久化

（1）安装：

npm install vuex-persistedstate

（2）在store.js中配置

import createPersistedState from 'vuex-persistedstate'
const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});

可以看到，引用的时候有一个storage: window.sessionStorage，说明会把数据存储到localStorage中可配置项
key： storage名称，所有的数据会存储到一个key里面，默认：vuex
storage：数据存储位置，默认：localStorage

（3）组件中获取
vuex里面存放的数据，页面一经刷新会丢失：
解决办法：存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去 localStorage或者sessionStorage里面取；
在app.vue根组件的created里面判断是否丢失，在进行上面的操作；

 created(){

      if(localStorage.vuex){
          this.list=JSON.parse(localStorage.vuex)
      }

  },

vuex-persistedstate 使用浏览器的本地存储（ local storage ）对状态（ state ）进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

一个很好的例子就是购物车：如果用户不小心关闭了一个标签，他们可以重新打开并回到之前页面的状态。