欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuex面试题

程序员文章站 2024-03-01 18:24:16
...

一、什么是vuex

  • vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态
  • 五个属性: state、getters、mutations、actions、module
  • 基本使用:
    新建store.js文件,最后在main.js中引入,并挂载到实列上
   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)
   const state = {}
   const getters = {}
   const mutations = {}
   const actions = {}
   export default new Vuex.Store({
       state,
       getters,
       mutations,
       actions
   
   })
  • state属性: 存放状态,例如你要存放的数据
  • getters: 类似于共享属性,可以通过this.$store.getters来获取存放在- state里面的数据
  • mutations: 唯一能改变state的状态就是通过提交mutations来改变,this.$store.commit()
  • actions: 一步的mutations,可以通过dispatch来分发从而改变state
    vuex面试题

二、数据持久化

  • vuex里面存放的数据,页面一经刷新会丢失:
    解决办法: 存放在localStorage或者sessionStorage里面,进入页面时判断是否丢失,丢失再去localStorage或者sessionStorage里面取;
    在app.vue根组件的created里面判断是否丢失,在进行上面的操作;
  • vuex-persistedstate 插件
cnpm i vuex-persistedstate -S

之后在store.js里面导入

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  plugins: [createPersistedState()]
)}

这样的话就可以做到数据持久化啦

三、map辅助函数

mapActions:

  • 在组件内导入import { mapActions } from 'vuex'

vuex面试题

  • mapGetters import { mapGetters} from 'vuex'

vuex面试题
其他的mapState,mapMutations也是一样操作