vuex 状态管理模式 + 库（大仓库与小仓库）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

但需要管理的状态实在太多，全部堆放在一个 state 中，在使用的还是不便，这个时候我们可以在 store 中创建多个模块。

本例中拥有两个组件 Home 与 Search

在 store 文件中新建 Home 文件夹与 Search 文件夹，下面分别创建 index.js ,文件目录如下

在 Home 的 index.js （ Search > index.js 同）中：

// home小仓库
export default {state: {},mutations: {},actions: {}},modules: {}}

在 store > index.js 中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入小仓库
import home from './home'
import search from './search'
export default new Vuex.Store({modules:{home,search}
})

这样我们变完成了在一个大仓库中创建多个小仓库，分别管理各自的数据。

实例：

在组件中访问数据时，先通过store.dispatch 派发 action ,acion 再 commit 提交到 mutations,

在 mutations 中修改 state.

举例：

import {reqGetSearchInfo} from "@/api"
// search 模块小仓库
export default{state: {searchList :{}},mutations: {GETSEARCHLIST(state,searchList){state.searchList = searchList}},actions: {async getSearchList({commit},params={}){// reqGetSearchInfo({}) 在调用的时候至少传一个空对象let result =  await reqGetSearchInfo(params)  //params 是当用户派发 action 的时候第二个参数，至少是个空对象if(result.status == 200){commit("GETSEARCHLIST",result.data.data)console.log(result.data.data);}}},//用于计算属性，主要作用是 简化数据而生，方便在组件中用getters:{goodsList(state){  // 这是当前仓库的 statereturn state.searchList.goodsList || [] // 如果突然没网，返回的就是 undefined ,所以给一个空数组以防万一},trademarkList(state){return state.searchList.trademarkList || []},attrsList(state){return state.searchList.attrsList || []}},modules: {}}

// home小仓库
import {reqCategoryList} from '@/api'
export default {state: {categoryList:[],},mutations: {CATEGORYLIST(state,categoryList){state.categoryList = categoryList}},actions: {async categoryList({commit}){let res = await reqCategoryList() // 因为 axios 返回的是一个promise 所以这里用 await 这样返回的结果就是对象if (res.status == 200) {commit("CATEGORYLIST",res.data.data)}}},modules: {}}

vuex 状态管理模式 + 库（大仓库与小仓库）相关推荐

vuex状态管理模式：入门demo（状态管理仓）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
Vuex状态管理模式-M
Vuex Vuex 是一个专为 Vue.js 开发的状态管理模式.主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),页面多并且一层嵌套一层的传值,非常麻烦, ...
Vuex 状态管理模式（使用）
一.Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 二.使用 1.安装依赖 ...
uvex快速入门 Vue.js 应用程序开发的状态管理模式 + 库
参考视频 vue参考文档 VueX 大型项目管理公共数据的工具作用: 独立与组件系统之外的,状态管理工具,采用集中式存储管理所有的组件状态,解决多组件数据通信(跨组件通信 A组件修改数据其他组件都 ...
状态管理模式 - vuex 的使用介绍
前言大家好,不知道大家在用 vue 进行开发过程中有没有遇到这样一种场景,就是有些时候一些数据是一种通用的共享数据(比如登录信息),那么这类数据在各个组件模块中可能都会用到,如果每个组件中都去后台重 ...
Vue组件传值存在的弊端-Vuex状态管理
以下内容纯属个人理解,旨在记录和分享. 导入使用Vue组件传值,可以实现父子组件之间的数据交换.但实际上,在应用过程中仍然存在很多不便之处: 当存在多层组件嵌套时,组件之间的传值将会变得极度麻烦和繁 ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
mount 返回状态_状态管理模式 — Vuex如何使用？
Extract 试想当我们在开发一个Vue应用程序时,如果在一个项目中频繁的使用组件传参的方式来同步data中的值,一旦项目结构变得复杂,管理和维护这些数据将变得十分繁琐,为此,Vue为这些被多个组件 ...
理解vuex -- vue的状态管理模式
2019独角兽企业重金招聘Python工程师标准>>> vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管 ...
【Vue.js】全局状态管理模式插件vuex
文章目录全局状态管理模式Vuex vuex是什么? 什么是"状态管理模式"? vuex的应用场景 Vuex安装开始核心概念一.State 1.单一状态树 2.在 Vue 组 ...

vuex 状态管理模式 + 库（大仓库与小仓库）

vuex 状态管理模式 + 库（大仓库与小仓库）相关推荐

最新文章

热门文章