vuex存取数据（typeScript）

兜小糖的小秃毛

已于 2023-01-11 13:33:03 修改

阅读量257

点赞数

分类专栏： JavaScript入门小案例 Vue 文章标签： typescript javascript 前端

于 2023-01-11 13:30:29 首次发布

本文链接：https://blog.csdn.net/Roy__Jason/article/details/128643301

版权

Vue 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript入门小案例

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vuex进行数据管理，特别是模块化的实现。首先定义了一个名为`authorityData`的模块，包含state、mutations、actions和getters，用于存储和操作`authorityList`数据。然后在store/index.ts中引入该模块，并在App.vue中设置数据。最后，在其他页面通过Vuex的计算属性获取并使用存储的数据。

摘要由CSDN通过智能技术生成

vuex存取数据

* 本文是将vuex分为好几个模块

一、首先定义假数组authorityList[]

const authorityData = {
  // 命名空间开启
  namespaced: true,
  state: () => {
    return {
      authorityList: []
    };
  },
  mutations: {
    setAuthorityList: (state: { authorityList: any }, authorityList: []) => {
      state.authorityList = authorityList
    }
  },
  actions: {
    setAuthorityList({ commit }: any, authorityList: any) {
      commit('setAuthorityList', authorityList)
    }
  },
  getters: {},
};

export default authorityData;

二、在store/index.ts中引用

import { createStore } from 'vuex';
import authorityData from "./authorityData";

export default createStore({
  state: {
    isMicroApp: (window as any).__POWERED_BY_QIANKUN__,
  },
  mutations: {
    initIsMicroApp(state, payload){
      state.isMicroApp = payload
    }
  },
  actions: {
    init({ commit }, { isMicroApp }){
      commit('initIsMicroApp', isMicroApp)
    }
  },
  getters: {},
  modules: {
    authorityData,
  }
});

在这里插入图片描述

三、在App.vue里面存入数据（分级实际情况而定）

    // 按钮权限获取
	function getAuthorityListFun() {
		// 本文中将vuex分为几个模块，方法是在某个模块中，直接通过store.commit('方法名')是获取不到的，必须要在前面加上模块名，如store.commit('模块名/方法名')才可以。
		store.commit('authorityData/setAuthorityList', ['a','b',1]);
	}
	onMounted(()=>{
		getAuthorityListFun()
	})

四、在对应页面获取存入的数据

	import { useStore } from 'vuex';
	
	const store = useStore();
    const authorityList = computed(() => {
		return store.state.authorityData.authorityList;
	});
    console.log(authorityList,'authorityListauthorityList')