浅谈Vuex@2.3.0 中的 state 支持函数申明

vuex 2.3.0 的发布说明: Modules can now declare state using a function - this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores)

假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如:

import api from '~api'

const actions = {
  async ['get']({commit, rootState: {route: { path }}}, config = {}) {
    const { data: { code, data } } = await api.post(config.url, config.data)
    if (code === 1001) commit('receive', data)
  }
}

const mutations = {
  ['receive'](state, data) {
    state.data = [].concat(data)
  },
  ['modify'](state, payload) {
    const index = state.data.findIndex(item => item.id === payload.id)
    if (index > -1) {
      state.data.splice(index, 1, payload)
    }
  },
  ['insert'](state, payload) {
    state.data = [payload].concat(state.data)
  },
  ['remove'](state, id) {
    const index = state.data.findIndex(item => item.id === id)
    state.data.splice(index, 1)
  }
}

const getters = {
  ['get'](state) {
    return state.data
  }
}
export const _actions = actions
export const _mutations = mutations
export const _getters = getters
export default {
  namespaced: true,
  actions,
  mutations,
  getters
}
import Vue from 'vue'
import Vuex from 'vuex'

import lists from './general/lists'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  modules: {
    base: {
      namespaced: true,
      modules: {
        app: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
        platform: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
        product: {
          namespaced: true,
          modules: {
            category: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
          }
        },
        keyword: {
          namespaced: true,
          modules: {
            username: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
          }
        },
      }
    },
    buzz: {
      namespaced: true,
      modules: {
        shop: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
      }
    }
})

但是 state 却需要每个单独设置, 如果直接设置在lists里, 会导致 state 对象被引用共享

在 vuex@2.3.0 中, 这个问题将不存在

import api from '~api'

const actions = {
  async ['get']({commit, rootState: {route: { path }}}, config = {}) {
    const { data: { code, data } } = await api.post(config.url, config.data)
    if (code === 1001) commit('receive', data)
  }
}

const mutations = {
  ['receive'](state, data) {
    state.data = [].concat(data)
  },
  ['modify'](state, payload) {
    const index = state.data.findIndex(item => item.id === payload.id)
    if (index > -1) {
      state.data.splice(index, 1, payload)
    }
  },
  ['insert'](state, payload) {
    state.data = [payload].concat(state.data)
  },
  ['remove'](state, id) {
    const index = state.data.findIndex(item => item.id === id)
    state.data.splice(index, 1)
  }
}

const getters = {
  ['get'](state) {
    return state.data
  }
}
export const _actions = actions
export const _mutations = mutations
export const _getters = getters
export default {
  namespaced: true,
  state() {
    return { lists: { data: [], total: 0, current_page: 1 } }
  },
  actions,
  mutations,
  getters
}
import Vue from 'vue'
import Vuex from 'vuex'

import lists from './general/lists'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  modules: {
    base: {
      namespaced: true,
      modules: {
        app: lists,
        platform: lists,
        product: {
          namespaced: true,
          modules: {
            category: lists,
          }
        },
        keyword: {
          namespaced: true,
          modules: {
            username: lists,
          }
        },
      }
    },
    buzz: {
      namespaced: true,
      modules: {
        shop: lists,
      }
    }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • weex里Vuex state使用storage持久化详解

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: storage 是一个在前端比较常用的模块,可以对本地数据进行存储.修改.删除,并且该数据是永久保存的,除非手动清除或者代码清除.但是,storage 模块有一个限制就是浏览器端(H5)只能存储小于5M的数据,因为在 H5/Web 端的实现是采用 HTML5 LocalStorage API.而 Andro

  • 详解Vuex中mapState的具体用法

    今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './action' import getters from './getters' Vue.use(Vuex) const state = { userI

  • Vuex之理解state的用法实例

    1.什么是state? 上一篇文章说了,Vuex就是提供一个仓库,仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 响应书存储:state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新.(这里"状态"="数据"),也就是是说数据和视图是同步的. 2.局部状态 获取:在Vue组件中获

  • Vuex利用state保存新闻数据实例

    回顾 以前我们在做这个新闻列表的时候,是一个写死的数据 export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"}, {newsid:"102",pubtime:"2016-10-28",title:"系统之战"

  • 详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

  • 浅谈Vuex@2.3.0 中的 state 支持函数申明

    vuex 2.3.0 的发布说明: Modules can now declare state using a function - this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores) 假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如: import ap

  • 浅谈vuex中store的命名空间

    为了防止store变的过于臃肿,我们可以为store注册模块,模块默认是属于全局命名空间的,也就是说当用下列代码分发action时,任意模块只要action中有addNews,就会得到执行 this.$store.dispatch('addNews') 有时候这种情况会不是我们想要的,为此我们可以为模块指定命名空间,相当于把它封装起来,这样在像上面那样分发action,具有命名空间的模块中的addNews函数就不会执行 当然你也可以指定位于特定的命名空间中的模块执行addNews这个函数,方法如

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • 浅谈Android Studio 3.0 工具新特性的使用 Android Profiler 、Device File Explorer

    前言: 其实 studio3.0的工具大家也已经使用过一段时间了,自己呢,就是从bate版开始使用的,我觉得比较好用的几个地方.就几个,可能还没用到其他的精髓. 但我觉的这个两个功能对我是比较实用的.好那么下面就给大家介绍一下吧. 正文: 话不多说咱们直接上图吧.(个人比较喜欢看图说话) 第一个(Android Profiler)我要介绍的就是这个了.(先看一下效果"震撼一下") (图-1) (图-2) (图-3) (厉害不厉害,牛逼不牛逼)那么我们怎么来操作这个工具呢,来咱们接着看图

  • 浅谈C++ 类的实例中 内存分配详解

    一个类,有成员变量:静态与非静态之分:而成员函数有三种:静态的.非静态的.虚的. 那么这些个东西在内存中到底是如何分配的呢? 以一个例子来说明: #include"iostream.h" class CObject { public: static int a; CObject(); ~CObject(); void Fun(); private: int m_count; int m_index; }; VoidCObject::Fun(){ cout<<"Fu

  • 浅谈php字符串反转 面试中经常遇到

    1.单字节字符串反转 php提供了用于字符串反转的函数strrev() $str = 'abcdef'; echo strrev($str); 2.对于包含中文的多字节字符串需要用到mb_substr() $str = '字符串反转'; function rev($str, $encoding = 'utf-8'){ $len = mb_strlen($str); $result = ''; for ($i = $len-1; $i>=0; $i--){ $result.= mb_substr(

  • 浅谈vuex的基本用法和mapaction传值问题

    vuex的理论知识就不多提了,官网上已经有明确的讲解. 用一个简单的例子来描述一下基本的用法: 第一步:npm install vuex –save-dev 第二步:在目录中创建store目录配置管理状态 //store/index.js /** * Created by zhaohuan on 2017/7/13. */ import Vue from 'vue' import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.St

  • 浅谈angular表单提交中ng-submit的默认使用方法

    在表单提交的时候,我使用了一个button,但ng-submit写在form标签中,然而button中我未使用任何方法访问submit()函数 <div ng-app="dkr"> <div ng-controller="logincontrol"> <form ng-submit="submit(user)"> <div>账号名 <input type="text" ng

  • 浅谈c++如何实现并发中的Barrier

    说到Barrier,很多语言中已经是标准库中自带的概念,一般情况下,只需要直接使用就行了.而最近一些机缘巧合的机会,我需要在c++中使用这么个玩意儿.但是c++标准库里还没有这个概念,只有boost里面有这样现成的东西,而我又不想为了这么一个小东西引入个boost.所以,我借着这个机会研究了下,发现其实这些多线程/并发中的东西还是蛮有意思的. 阅读本文你可能需要如下的一些知识: 多线程编程的概念. c++的基本语法和有关多线程的语法. 第二条可能也没有那么重要,因为如果理解了多线程的这些东西,什

  • 浅谈redis缓存在项目中的使用

    背景 Redis 是一个开源的内存数据结构存储系统. 可以作为数据库.缓存和消息中间件使用. 支持多种类型的数据结构. Redis 内置了 复制(replication),LUA脚本(Lua scripting), LRU驱动事件(LRU eviction),事务(transactions) 和不同级别的 磁盘持久化(persistence). 通过 Redis 哨兵(Sentinel)和 Redis 集群(Cluster)的自动分区,提供高可用性(high availability). 基本数

随机推荐