博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【15】vuex2.0 之 modules
阅读量:5845 次
发布时间:2019-06-18

本文共 5281 字,大约阅读时间需要 17 分钟。

  vue 使用的是单一状态树对整个应用的状态进行管理,也就是说,应用中的所有状态都放到store中,如果是一个大型应用,状态非常多, store 就会非常庞大,不太好管理。这时vuex 提供了另外一种方式,可以把整个store 分成几个大的模块,如登录模块,用户模块等,每一个模块都有自己的state, mutation, actions ,getters , 它就相当于是一个小的store,然后我们的根store(通过new Vuex.Store 生成的store) 通过它的modules属性引入这些模块,从而我们的组件就可以使用这些modules 中状态(state).

  新建一个项目体验一下,通过vue –cli新建一个项目vuemodule, 不要忘记安装vuex.

  1, 在src 目录下新一个login文件夹,在里面新建index.js 用于存放login 模块的状态。 为了简单起见,我把模块下的state, actions,mutations, getters 全放在index.js文件中。

先简单给它增加一个状态,userName: “sam”

const state = {    useName: "sam"};const mutations = {};const actions = {};const getters = {};// 不要忘记把state, mutations等暴露出去。export default {    state,    mutations,    actions,    getters}

  2,在src 目录下,再新建一个 store.js 这是根store, 它通过modules 属性引入 login模块。

import Vue from "vue";import Vuex from "Vuex";Vue.use(Vuex);// 引入login 模块import login from "./login"export default new Vuex.Store({    // 通过modules属性引入login 模块。    modules: {        login: login    }})

  3, 在main.js中引入store, 并注入到vue 根实例中。

import Vue from 'vue'import App from './App.vue'// 引入storeimport store from "./store"new Vue({  el: '#app',  store,  // 注入到根实例中。  render: h => h(App)})

  4,在 app.vue 中通过computed属性获取到login下的state.  这里要注意,在没有modules 的情况下,组件中通过  this.$store.state.属性名  可以获取到,但是有modules 之后,state 被限制到login 的命名空间(模块)下,所以属性名前面必须加模块名(命名空间),组件中通过 this.$store.state.模块名.属性名,在这里是 this.$store.state.login.userName

组件中成功获取到状态。项目目录和展示如下

  4 ,通过actions, mutations 改变名字, 这就涉及到dispatch action, commit mutations, mutations 改变state. 

  先在login 文件夹 index.js中添加changeName action 和  CHANGE_NAME  mutations.

const mutations = {    CHANGE_NAME (state, anotherName) {        state.useName = anotherName;    }};const actions = {    changeName ({commit},anotherName) {        commit("CHANGE_NAME", anotherName)    }};

  在app.vue 中添加一个按钮:<button> change to json</button>, 点击时,dispatch  一个 action. 那在组件中怎么dispatch actions 呢?

  在模块中,state 是被限制到模块的命名空间下,需要命名空间才能访问。 但actions 和mutations, 其实还有 getters 却没有被限制,在默认情况下,它们是注册到全局命名空间下的,所谓的注册到全局命名空间下,其实就是我们访问它们的方式和原来没有module 的时候是一样的。比如没有module 的时候,this.$store.dispatch(“actions”), 现在有了modules, actions 也写在了module 下面(changeName 写到了login目录下的index.js中),我们仍然可以这么写,this.$store.dispatch(“changeName”), 组件中的getters, 也是通过 this.$store.getters.module中getters 来获取。

  5, 局部参数

  虽然dispatch action和 commit mutations 可以全局使用,但是写在module 中的actions, mutations 和getters, 它们获得的默认参数却不是全局的,都是局部的,被限定在它们所在的模块中的。比如mutations和getters 会获得state 作为第一个默认参数,这个state参数,就是限定在mutations 和getters 所在模块的state对象,login 文件夹下的mutations 和getters 只会获取到当前index.js 中的 state 作为参数 。 actions 会获得一个context 对象作为参数,这个context 对象就是当前module 的实例,module 相当于一个小store.

    那么怎样才能获取到根store 中的state 和 getters 呢? Vuex 提供了 rootState, rootGetters 作为module 中  getters 中默认参数, actions中context 对象,也会多了两个属性,context.getters, context. rootState,  这些全局的默认参数,都排在局部参数的后面。

  我们在store.js中添加 state, getters:  

export default new Vuex.Store({    // 通过modules属性引入login 模块。    modules: {        login: login    },    // 新增state, getters    state: {        job: "web"    },    getters: {        jobTitle (state){            return state.job + "developer"        }    }})

  login 目录下的 index.js

const actions = {    // actions 中的context参数对象多了 rootState 参数    changeName ({commit, rootState},anotherName) {        if(rootState.job =="web") {            commit("CHANGE_NAME", anotherName)        }    }};const getters = {    // getters 获取到 rootState, rootGetters 作为参数。    // rootState和 rootGetter参数顺序不要写反,一定是state在前,getter在后面,这是vuex的默认参数传递顺序, 可以打印出来看一下。    localJobTitle (state,getters,rootState,rootGetters) {          console.log(rootState);        console.log(rootGetters);        return rootGetters.jobTitle + " aka " + rootState.job     }};

  app.vue 增加h2 展示 loacaJobTitle, 这个同时证明了getters 也是被注册到全局中的。

   6, 其实actions, mutations, getters, 也可以限定在当前模块的命名空间中。只要给我们的模块加一个namespaced 属性:

const state = {    useName: "sam"};const mutations = {    CHANGE_NAME (state, anotherName) {        state.useName = anotherName;    }};const actions = {    changeName ({commit, rootState},anotherName) {        if(rootState.job =="web") {            commit("CHANGE_NAME", anotherName)        }    },    alertName({state}) {        alert(state.useName)    }};const getters = {    localJobTitle (state,getters,rootState,rootGetters) {          return rootGetters.jobTitle + " aka " + rootState.job     }};// namespaced 属性,限定命名空间export default {    namespaced:true,    state,    mutations,    actions,    getters}

  当所有的actions, mutations, getters 都被限定到模块的命名空间下,我们dispatch actions, commit mutations 都需要用到命名空间。如 dispacth("changeName"),  就要变成 dispatch("login/changeName"); getters.localJobTitle 就要变成 getters["login/localJobTitle"]

  app.vue 如下:

  有了命名空间之后,mapState, mapGetters, mapActions 函数也都有了一个参数,用于限定命名空间,每二个参数对象或数组中的属性,都映射到了当前命名空间中。

 

转载于:https://www.cnblogs.com/yeziTesting/p/7182904.html

你可能感兴趣的文章
我的友情链接
查看>>
DNS区域委派与转发
查看>>
Windows Server 2008 RemoteApp---发布应用程序
查看>>
白帽子技术分析会话劫持实战讲解
查看>>
我的友情链接
查看>>
yum的三种方式
查看>>
人生苦短我用python(02)动态加载模块
查看>>
Redis分布式缓存安装和使用
查看>>
PHP环境搭建:Windows 7下安装配置PHP+Apache+Mysql环境教程以及注意事项
查看>>
20天精通 Windows 8:系列课程资料集
查看>>
html5 <figure> 标签
查看>>
linux的I/O多路转接select的fd_set数据结构和相应FD_宏的实现分析
查看>>
Mysql数据库InnoDB存储引擎的隔离级别
查看>>
开源监控软件 Hyperic 的两种插件
查看>>
TOMCAT
查看>>
无土栽培中的物联网技术应用
查看>>
div contenteditable="true"各个浏览器上的解析
查看>>
Spark学习记录(二)Spark集群搭建
查看>>
Python基本数据类型之字典
查看>>
php引用(&)详解及注意事项
查看>>