Vuex最完整的模块定义

gecko23 发布于2019-08-23 13:05 / 1750人阅读

const state = {
  token: 0,
  username: "",
};

const getters = {
  isLogin: (state, getter, rootState, rootGetter) => {  
    //其中rootState, rootGetter可以访问命名空间之外的全局变量，顺序不能变。
    return state.token == "1";
  },
};


const mutations = {
  UPDATE_TOKEN(state, payload) {
    state.token = payload;
  }
};


const actions = {
  update_warn_num(store,payload) {
    let {commit,dispatch,getters,rootGetters,rootState,state} = store; //通过解构获得，顺序无所谓，但名字不能变.
    
    commit("UPDATE_TOKEN", { a: 10 });                      //访问本模块的mutation, { a: 10 }为payload
    
    commit("home/UPDATE_TEST", { a: 10 }, { root: true });    //访问全局的mutation，home/UPDATE_TEST为home模块中的UPDATE_TEST mutation，  { a: 10 }为payload

    dispatch("update_warn_num",{ a: 10 });                  //访问本模块的action， { a: 10 }为payload
    
    dispatch("home/update_test", { a: 10 }, {root: true});    //访问全局的action，home/update_test为home模块中的update_test action， { a: 10 }为payload
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

在项目中有时就会用到在一个命名模块中访问/调用另一个模块的state，mutation，action等，所以把使用的普遍方法总结下来，以供需要者参考。

GPU云服务器云服务器最完整 Vuex vuex cdn html的完整格式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99208.html

Vue2.5+ Typescript 引入全面指南 - Vuex篇

摘要：引入全面指南篇系列目录引入全面指南引入全面指南篇前言正是我下决心引入的核心痛点。其中，可以通过建立辅助函数形式，简单绕开。只是类型均为建议不使用，以明确指定类型及调用可通过上述下辅助函数，手动开启类型推导及类型推导，暂时只能手动指定。 Vue2.5+ Typescript 引入全面指南 - Vuex篇系列目录： Vue2.5+ Typescript 引入全面指南 Vue2.5+ T...

DataPipeline 2019-08-21 17:27 评论0 收藏0
Vuex? 和 TypeScript 的 Webpack4.+ 尝鲜

摘要：静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐丰满会更加显著。选择，会生成符合规范的文件，使用，会生成满足规范的文件，使用会生成使用的的代码。使用或者是会生产包含特性的代码。 showImg(https://segmentfault.com/img/bVbbhsr?w=800&h=800); 静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐...

Astrian 2019-08-22 17:33 评论0 收藏0
详解基于vue，vue-router, vuex以及addRoutes进行权限控制

摘要：基于的权限控制教程，完整代码地址见接下来让我们模拟一个普通用户打开网站的过程，一步一步的走完整个流程。由于权限这块逻辑还挺多，所以在添加了一个模块来处理权限。基于vuex, vue-router,vuex的权限控制教程，完整代码地址见 https://github.com/linrunzhen... 接下来让我们模拟一个普通用户打开网站的过程，一步一步的走完整个流程。首先从打开本...

eternalshallow 2019-08-26 11:53 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

fish 2019-08-29 11:27 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 评论0 收藏0