vuex持久化和模块化写法记录

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量617 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoyu19940615/article/details/127364151
版权

一、vuex持久化

1、使用插件vuex-persistedstate  Vuex数据持久化存储。

2、不使用插件方式：存储在localStorage或者sessionStorage，state定义变量，mutations同步更新变量，并且存储一份在localStorage或者sessionStorage中，actions异步请求，触发mutations同步更新，getters(store的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算)对state进行计算并缓存。

// import { findMenuTree, findMenuList } from "../../json/list";  // 测试环境,暂时使用
// import { findMenuList } from "../../json/list";  // 测试环境,暂时使用
import { findMenuTreeSideBar, findMenuList } from '@/http/moudules/menu'
import { getPermissionList } from '@/http/moudules/login'

export default {
  state: {
    menuTree: null, // 菜单树
    menuList: null,
    firstPath: null,
    menuRouteLoaded: null // 菜单和路由是否已经加载
  },
  getters: {
    menuTree: (state) => {
      if (state.menuTree === null || state.menuTree.length === 0) {
        state.menuTree = JSON.parse(sessionStorage.getItem('menuTree')) || []
      }
      return state.menuTree
    },
    menuList: (state) => {
      if (state.menuList === null || state.menuList.length === 0) {
        state.menuList = JSON.parse(sessionStorage.getItem('menuList')) || []
      }
      return state.menuList
    },
    firstPath: (state) => {
      if (state.firstPath === null) {
        state.firstPath = sessionStorage.getItem('firstPath') || '/'
      }
      return state.firstPath
    },
    menuRouteLoaded: (state) => {
      if (state.menuRouteLoaded === null) {
        state.menuRouteLoaded = sessionStorage.getItem('menuRouteLoaded') || false
      }
      return state.menuRouteLoaded
    }
  },
  mutations: {
    setMenuTree(state, menuTree) {
      // 设置导航菜单树
      sessionStorage.setItem('menuTree', JSON.stringify(menuTree))
      state.menuTree = menuTree
    },
    setMenuList(state, menuList) {
      // 设置菜单列表
      sessionStorage.setItem('menuList', JSON.stringify(menuList))
      state.menuList = menuList
    },
    setFirstPath(state, firstPath) {
      sessionStorage.setItem('firstPath', firstPath)
      state.firstPath = firstPath
    },
    setMenuRouteLoaded(state, menuRouteLoaded) {
      // 改变菜单和路由的加载状态
      sessionStorage.setItem('menuRouteLoaded', menuRouteLoaded)
      state.menuRouteLoaded = menuRouteLoaded
    }
  },
  actions: {
    getMenuTree({ commit }) {
      let userInfo = JSON.parse(localStorage.getItem('user_info'))

      let data = {
        userId: userInfo.userId,
        tenantId: userInfo.tenantId,
        appId: userInfo.tenantAppId
      }

      return new Promise((resolve) => {
        findMenuTreeSideBar(data).then((response) => {
          resolve(response.data)
        })
        // resolve(findMenuTree().data.data); // 测试环境,暂时使用
      }).then((data) => {
        return new Promise((resolve) => {
          // 保存加载状态
          commit('setMenuRouteLoaded', true)
          // 保存菜单树
          // data.unshift({
          //   id: '-1',
          //   menuIcon: 'el-icon-s-comment',
          //   menuName: '首页',
          //   url: '/welcome',
          //   children: [],
          //   component: '/welcome',
          //   type: {
          //     value: 0,
          //     desc: '目录'
          //   },
          //   parent: {}
          // })
          commit('setMenuTree', data)

          resolve(data)
        })
      })
    },
    getPerList({ commit }) {
      let userInfo = JSON.parse(localStorage.getItem('user_info'))

      let data = {
        userId: userInfo.userId,
        tenantId: userInfo.tenantId,
        appId: userInfo.tenantAppId
      }

      return new Promise((resolve) => {
        findMenuList(data).then((response) => {
          resolve(response.data)
        })
        getPermissionList().then((res) => {
          commit('setPerms', res.data.value)
        })
        // resolve(findMenuList().data.data) // 测试环境,暂时使用
      }).then((data) => {
        return new Promise((resolve) => {
          let temp = data
            .filter((n) => {
              return n.type.value === 0 || n.type.value === 1
            })
            .map((m) => m.url.toLowerCase())
          // 保存菜单权限列表
          commit('setMenuList', temp)
          resolve(temp)
        })
      })
    },
    resetPermissionLoad({ commit }) {
      commit('setMenuRouteLoaded', false)
    }
  }
}

页面访问：

import { mapGetters } from 'vuex'

 computed: {

    ...mapGetters(['menuTree']),

  },

通过this.menuTree访问

或者this.$store.getters['menuTree']

二、vuex模块化 vuex使用详解-Module模块

默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）。必须注意，不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

模块注册方式：modules和registerModule

modules方式：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const stateData = {
  functionType: '', //运行类型FORMAL_OPERATION_PROJECT正式，INFORMAL_OPERATION_PROJECT-非正式
  consignInfo: '', //合同信息-甲方（客户）
  transportInfo: '', //签约主体-乙方
  contractTime: '', //承运合同-合同时间
  isSameShipper: false, //收货方是否同发货方
  shipper: {}, //发货方
  projectName: '', //项目名称
  commissionRate: 0 //佣金比例
}
const mutations = {
  setFunctionType(state, val) {
    state.functionType = val
  },
  setConsignInfo(state, val) {
    state.consignInfo = val
  },
  setTransportInfo(state, val) {
    state.transportInfo = val
  },
  setContractTime(state, val) {
    state.contractTime = val
  },
  setIsSameShipper(state, val) {
    state.isSameShipper = val
  },
  setShipper(state, val) {
    state.shipper = val
  },
  setProjectName(state, val) {
    state.projectName = val
  },
  setCommissionRate(state, val) {
    state.commissionRate = val
  }
}
const getters = {
  functionType: (state) => {
    return state.functionType
  },
  consignInfo: (state) => {
    return state.consignInfo
  },
  transportInfo: (state) => {
    return state.transportInfo
  },
  contractTime: (state) => {
    return state.contractTime
  },
  isSameShipper: (state) => {
    return state.isSameShipper
  },
  shipper: (state) => {
    return state.shipper
  },
  projectName: (state) => {
    return state.projectName
  },
  commissionRate: (state) => {
    return state.commissionRate
  }
}
const add = {
  namespaced: true,
  state: () => _.cloneDeep(stateData),
  mutations,
  getters,
  actions: {}
}
const edit = {
  namespaced: true,
  state: () => _.cloneDeep(stateData),
  mutations,
  getters,
  actions: {}
}
export default new Vuex.Store({
  modules: {
    add,
    edit
  }
})

registerModule方式：

import Vue from 'vue';
import Vuex from 'vuex';
import {
	store
} from '@gtff/tdesign-gt-vue';
import zrsq from './modules/zrgl/zrsq';
import comlq from './modules/comlq';

const initStore = store.init(Vue, Vuex);

initStore.registerModule('index', {
	namespaced: true,
	state: {
		user: 'index name',
		userId: '10214406000000023059',
	},
	getters: {
		userId(state) {
			console.log(new Date())
			return state.userId
		}
	},
	mutations: {
		changeUserId(state, id) {
			state.userId = id;
		}
	},
	actions: {
		changeUserIdFun({ commit }, args) {
			commit('changeUserId', args)
		}
	}
});
initStore.registerModule('zrsq', zrsq);
initStore.registerModule('comlq', comlq);
export default initStore;

页面使用：

import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
export default {

  computed: {
    // ...mapGetters(['userId']),
    ...mapGetters(['index/userId']),
    ...mapState({
      userId1: state => state.index.userId
    }),
  },
  mounted() {
 
    console.log('state userId', this.$store.state.index.userId)
    console.log('state mapState userId', this.userId1)

    //getters
    console.log('getters userId', this.$store.getters['userId'])
    console.log('getters mapGetters  userId', this['userId'])

   
    //getters-命名空间
    console.log('getters userId', this.$store.getters['index/userId'])
    console.log('getters mapGetters  userId', this['index/userId'])

    //mutations
    this.$store.commit('changeUserId', '223333')
    this['changeUserId']('4445555')

    //actions
    this.$store.dispatch('changeUserIdFun', 'aaaaaa')
    this['changeUserIdFun']('bbbbb')

    //mutations-命名空间
    this.$store.commit('index/changeUserId', '223333')
    this['index/changeUserId']('4445555')

    //actions-命名空间
    this.$store.dispatch('index/changeUserIdFun', 'aaaaaa')
    this['index/changeUserIdFun']('bbbbb')

  },
  methods: {
    // ...mapMutations(['index/changeUserId']),
    // ...mapActions(['index/changeUserIdFun']),
    ...mapMutations(['changeUserId']),
    ...mapActions(['changeUserIdFun']),
  },

};

意井
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex 模块化写法
sjxgghg的博客
08-24 541
在store文件夹下，把不同功能的模块放在不同的js文件中。在文件中，导入count.js和的代码内容在，给不同的模块取名：countAbout，personAbout；
Vuex 数据状态持久化 vuex-persistedstate（配置全部或部分）
小草莓的博客
10-13 1173
Vuex数据状态持久化（配置全部或部分） vuex-persistedstate
【vue】vuex持久化插件vuex-persistedstate：
SunPeng的博客
09-05 1605
【vue】vuex持久化插件vuex-persistedstate：
vuex模块化写法
csdnyp的博客
12-07 1217
怎么将vuex模块化
模块化vuex的写法
qq_43952245的博客
03-22 232
vuex模块化的写法及用法：state、getteer、mutations、actions
y1238r的博客
03-24 908
文章目录一、main.js：挂载二、index.js：导出 store三、app.js：导出app模块四、结构五、具体使用1、state2、getters3、mutations4、actions 一、main.js：挂载 import store from './store/index'; Vue.prototype.$store = store; 二、index.js：导出 store import Vue from "vue"; import Vuex from "vuex"; import app
vuex的简单使用和模块化写法
qq_42750608的博客
06-03 274
1.新建一个store文件夹在src目录下 (1)新建index.js import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getter' import mutations from './mutation' import actions from ...
vuex的模块化
richest_qi的博客
05-06 2049
本例有两个组件，分别是， Count组件，详见Count.vue。 Person组件，详见Person.vue。 Count组件和Person组件共享以下两个数据： sum personList 代码主要涉及如下3个文件， store/index.js App.vue Count.vue Person.vue main.js main.js import Vue from 'vue' import App from './App.vue' import store from "./store".
Vue学习笔记06 Vuex-模块化编程
好好学习天天向上
04-20 1259
文章目录Vue学习笔记06 Vuex理解vuex如何使用？执行的流程Devtools Vue学习笔记06 Vuex 理解vuex 是什么？ 在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中的管理，适合任意组件间通信。 插件import 'vuex' 什么时候使用vuex 1.多个组件依赖于同一状态 2.来自不同组件的行为需要变更同一状态 如何使用？ 1.npm i vuex@3 vue2对应vuex3版本 vue3对应vuex4版本 2.Vue.use(Vu
如何实现一个简易版的vuex持久化工具
12-08
最近用uni-app开发小程序项目时，部分需要持久化的内容没法像其他vuex中的state那样调用，所以想着自己实现一下类似vuex-persistedstate插件的功能，貌似代码量也不会很大 初步思路 首先想到的实现方式自然是vue的...
vuex实现数据状态持久化
10-16
今天小编就为大家分享一篇vuex实现数据状态持久化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vuex持久化插件解决浏览器刷新数据消失问题
10-17
主要介绍了详解vuex持久化插件解决浏览器刷新数据消失问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex模块化
Liberty_yes的博客
02-10 6012
将store模块化（module），即每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
【Vuex深入以及模块化编码】
小田是个程序员的博客欢迎你的到来呀~
03-19 1856
Vuex的深入理解，你值得拥有，头发可不能让他白掉呀！宝贝
Vuex State模块化
weixin_45766034的博客
09-15 554
当应用非常复杂的时候，store对象就会变得非常臃肿。 为了解决上面的问题，我们将store分成模块 文件目录如下 方案一： 方案二： 状态管理中 state 就相当于 vue中 data属性， getters就相当于vue中的computed属性， mutations, actions就相当于vue中的方法 getter gettetr被认为 是计算属性 返回值会作为依赖缓存起来 只有当依赖发生变化时才会重新计算 mutation action 模块化 import Vue from "vu
Vue 之Vuex（状态管理模式）及其模块化
qq_36582776的博客
11-17 695
1.安装，使用 2.原理图 Actions用于与其他服务器交互，判断提交过来的操作的合理性，处理一些非数据操作的逻辑。（数据延时处理时的延时工作，判断条件再处理时的判断条件工作等）。这一步可以跳过。 Mutations用于进行真正的数据处理，可以看到底层的State，并且其行为被开发者工具监视。 3. 创建store： 在src里面创建一个文件夹，名为store，文件夹里面创建index.js index.js里面写store的逻辑： // ...
Vuex 模块化详解
wuxian_wj的博客
12-20 6769
本篇主要讲vuex的模块化，虽然官网已经讲得比较细致了，但是在实践的时候还是踩了不少坑。今天就在这里把模块化使用过程中的细节都讲清楚，方便大家学习，也方便自己以后复习。 1.Vuex简单介绍 1.1 Vuex是什么 官方：Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（即通过提交mutation来更新状态） Vuex是适用于Vue项目开发时使用的状态管理工具。把组件中的共享状态抽取出来，以一个全局单例模式管理
vuex持久化存储（vuex-persist）
qq_34082921的博客
06-14 2128
在开发的过程中， vuex数据刷新页面会初始化。像用户信息（名字，头像，token）需要vuex中存储且需要浏览器本地存储来实现持久化存储。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 335
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vuex持久化存储vuex模块
11-20
为了实现Vuex模块的持久化存储，可以使用vuex-persistedstate插件。下面是实现Vuex模块持久化存储的步骤： 1. 安装vuex-persistedstate插件： ```shell npm i vuex-persistedstate@3.2.1 ``` 2. 在Vuex store中引入vuex-persistedstate插件： ```javascript import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [createPersistedState()] }) ``` 3. 在Vuex store中定义需要持久化存储的模块： ```javascript import user from './modules/user' const store = new Vuex.Store({ modules: { user }, plugins: [createPersistedState()] }) ``` 在上面的代码中，我们将user模块定义为需要持久化存储的模块。 4. 在需要持久化存储的模块中添加一个`namespaced`属性： ```javascript const user = { namespaced: true, // ... } ``` 5. 在需要持久化存储的模块中添加一个`mutations`属性： ```javascript const user = { namespaced: true, state: { // ... }, mutations: { // ... } } ``` 6. 在`mutations`中添加一个`RESTORE_MUTATION`： ```javascript import { RESTORE_MUTATION } from 'vuex-persistedstate' const user = { namespaced: true, state: { // ... }, mutations: { [RESTORE_MUTATION] (state, payload) { Object.assign(state, payload) }, // ... } } ``` 7. 在需要持久化存储的模块中添加一个`actions`属性： ```javascript const user = { namespaced: true, state: { // ... }, mutations: { // ... }, actions: { // ... } } ``` 8. 在`actions`中添加一个`init`方法： ```javascript const user = { namespaced: true, state: { // ... }, mutations: { // ... }, actions: { init ({ commit }) { commit(RESTORE_MUTATION, JSON.parse(localStorage.getItem('vuex'))) }, // ... } } ``` 9. 在Vue应用的入口文件中调用`init`方法： ```javascript import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ store, render: h => h(App), created () { this.$store.dispatch('user/init') } }).$mount('#app') ``` 现在，我们已经成功地实现了Vuex模块的持久化存储。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值