Vuex基本使用 项目基本构建模块化

最新推荐文章于 2023-11-11 15:11:10 发布
最新推荐文章于 2023-11-11 15:11:10 发布
阅读量151 收藏
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/layxing27/article/details/109106787
版权

在这里插入图片描述

文章目录

Vuex 状态管理模式

在这里插入图片描述

1 概念

1.1 官方

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

1.2 理解

  • 是全局模式 所有组件可以都可以访问的数据(共享数据)

1.3 作用

  • 通信
    • 所有的库或者依赖出现的原因都是解决原生实例上的痛点
    • 在vue实例上子父组件通信,比较麻烦,如果组件多.组件之间的通信杂乱无章
    • vuex可以解决组件之间通信的问题
  • 共享
    • 就好像是一个共享存储,子组件可以调用共享数据的方法和数据
  • 模块化思想
    • 把单独的共享部分提取出来,方便项目管理
  • 保证数据统一
    • 每一个组件都是从共享存储中拿数据,所有组件数据统一
    • vuex实例上的mutations对象可以监听次方法被调用,方便找到那部分出错

2 配置

2.1 原生创建

  • 在vue项目创建的时候直接选上vuex
  • 项目会配置好并且可以直接使用
  • 比原来项目多了一个store文件夹/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

2.2 后期创建

安装

cnpm i vuex -S

配置

  • 在src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
  • 在main.js中引入
import store from './store'

使用

1 定义
  • 在src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 1,
    number: 2
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
2 配置
  • mapState
import { mapState } from 'vuex'
export default {
  name: 'index',
  methods: {

  },
  computed: {
    ...mapState(['count', 'number'])
  }
}
3 使用
  • 直接变量名使用
 <div class="home">
    {{count}}------>count
    {{number}}----->number
  </div>

3 实例对象使用

  • state 数据
  • mutations 同步方法
  • actions 异步方法
  • getters 计算
  • mudules 模型

3.1 state的使用

  • 相当于vue实例中data,但是这个是全局的(所有组件都可以访问到)
3.1.1 定义
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 1,
    number: 2
  }
})
3.1.2 配置
  • 使用数据的组件中
  • …mapState() 定义可以接受多个参数
import { mapState } from 'vuex'
export default {
  name: 'index',
  methods: {

  },
  computed: {
    ...mapState(['count', 'number'])
  }
}
3.1.3 使用
 <div class="home">
    {{count}}------>count
    {{number}}----->number
  </div>

3.2 mutations

  • 相当于vue实例中的methods,但是这个可以监听
  • 调用组件中需要this.$state.commit 可完成监听
  • 只能做同步的请求
3.2.1 普通使用
  • 类似vue中子父组件的方法调用
无参
1 定义
  • index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 1,
    number: 2
  },
  mutations: {
    addCount (state) {
      state.count += 1
    }
  },
  actions: {
  },
  modules: {
  }
})
2 配置
import { mapState } from 'vuex'
export default {
  name: 'index',
  methods: {
    addCount () {
      this.$store.commit('addCount')
    }
  },
  computed: {
    ...mapState(['count', 'number'])
  }
}
3 使用
 <div class="home">
    {{count}}
    {{number}}
    <button @click="addCount"> ++</button>
  </div>

在这里插入图片描述

有参(数值或对象)
1 定义
  mutations: {
    addCount (state, num) {
      state.count += num
    }
   // addCount (state, obj) {
   //   state.count += obj.value
   // }  
  },
2 配置
  methods: {
    addCount () {
      this.$store.commit('addCount', 2)
      // this.$store.commit({type:'addCount',value:2})
    }
  },
3 使用
 <div class="home">
    {{count}}
    {{number}}
    <button @click="addCount"> ++</button>
  </div>
3.2.2 推荐使用
  • …mapMutations
无参
  • 这样定义的不能传参
1 定义
export default new Vuex.Store({
  state: {
    count: 1,
    number: 2
  },
  mutations: {
    addCount (state) {
      state.count += 1
    }
  },
  actions: {
  },
  modules: {
  }
})
2 配置
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'index',
  methods: {
    ...mapMutations(['addCount'])
  },
  computed: {
    ...mapState(['count', 'number'])
  }
}
3 使用
 <div class="home">
    {{count}}
    {{number}}
    <button @click="addCount"> ++</button>
  </div>
有参(对象)
1 定义
 mutations: {
    addCount (state, obj) {
      state.count += obj.value
    }
  },
2 配置
  methods: {
    ...mapMutations({
      addCount: {
        type: 'addCount',
        value: 2
      }
    })
  },
3 使用
 <div class="home">
    {{count}}
    {{number}}
    <button @click="addCount"> ++</button>
  </div>

3.3 actions

  • 可以做异步请求axios

  • commit + dispatch来实现

1 定义
export default new Vuex.Store({
  state: {
    count: 1,
    number: 2
  },
  mutations: {
    addCount (state, obj) {
      state.count += obj.value
    }
  },
  actions: {
    addCount ({ commit }, obj) {
      commit('addCount', obj)
    }
  },
  modules: {
  }
})
2 配置
  methods: {
    addCount () {
      // this.$store.dispatch('addCount', 2)
      this.$store.dispatch({ type: 'addCount', value: 2 })
    }
  },
3 使用
 <div class="home">
     {{count}}
     {{number}}
     <button @click="addCount"> ++</button>
</div>

3.4 getters

  • 类似于 computed和filter的组合
1 定义
 getters: {
    getCount (state) {
      return state.count + '100000'
    }
  }
2 配置
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'index',
  methods: {
    addCount () {
      this.$store.dispatch({ type: 'addCount', value: 2 })
    }
  },
  computed: {
    ...mapState(['count', 'number', 'data']),
    ...mapGetters(['getCount'])
  }
}
3 使用
<template>
  <div class="home">
    {{count}}
    {{number}}
    {{data}}
    {{getCount}}
    <button @click="addCount"> ++</button>
  </div>
</template>

在这里插入图片描述

3.5 module

  • 字面意思模块 主模块
  • 用来存放子模块的容器
  • 子模块与主模块一样(有state,mutations,actions,getters)
1 定义
  • 需要创建module/users/index.js
  • 创建module/users/state/index.js …
子模块

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex)
export default {
  namespaced: true,
  state
}

state/index.js

export default {
  name: 'lay',
  age: 15
}
主模块

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import users from './modules/users'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    users
  }
})
2 配置
  computed: {
    ...mapState(['count', 'num', 'data', 'users'])
  }
3 使用
<h1>{{users}}</h1>

3.6 state+action+请求

  • 下载axios 依赖

    cnpm i axios -S

  • 引用

    import axios from 'axios'
1 定义
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 1,
    number: 2,
    data: []
  },
  mutations: {
    addCount (state, obj) {
      state.data = obj
    }
  },
  actions: {
    addCount ({ commit }, obj) {
      axios.get('http://jsonplaceholder.typicode.com/todos').then(res => {
        commit('addCount', res)
      })
    }
  },
  modules: {
  }
})
2 配置
import { mapState } from 'vuex'
export default {
  name: 'index',
  methods: {
    addCount () {
      this.$store.dispatch({ type: 'addCount', value: 2 })
    }
  },
  computed: {
    ...mapState(['count', 'number', 'data'])
  }
}
3 使用
{{data}}

4 模块化开发

在这里插入图片描述
在这里插入图片描述

主模块

1 index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import users from './modules/users'
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    users
  }
})
2 state/index.js
export default {
  count: 1,
  num: 2,
  data: []
}
3 mutations/index.js
import { types } from '../types'
export default {
  [types.ADD] (state, obj) {
    state.data = obj
    state.count++
  }
}
4 actions/index.js
import axios from 'axios'
import { types } from '../types'
export default {
  [types.ADD] ({ commit }, obj) {
    axios.get('http://jsonplaceholder.typicode.com/todos').then(res => {
      console.log(res)
      commit(types.ADD, res)
    })
  }
}
5 getters/index.js
import { types } from '../types'
export default {
  [types.GETDATA] (state) {
    return state.num + '5555555'
  }
}
6 types/index/js
export const types = {
  ADD: 'ADD',
  GETDATA: 'GETDATA'
}

子模块

index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex)
export default {
  namespaced: true,
  state
}
state/index.js
export default {
  name: 'lay',
  age: 15
}

主模块使用

<template>
  <div class="home">
  <h1> count: {{count}}</h1> <button @click="ADD">+++</button>
  <h1> num: {{num}}</h1>
  <h1>{{data.data}}</h1><button>{{GETDATA}}</button>
  <h1>{{users}}</h1>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import { types } from '@/store/types'
export default {
  name: 'Home',
  components: {
  },
  methods: {
    ...mapMutations([types.ADD]),
    ...mapActions([types.ADD])
  },
  computed: {
    ...mapState(['count', 'num', 'data', 'users']),
    ...mapGetters([types.GETDATA])
  }
}
</script>

在这里插入图片描述

5 接口的反向代理

在这里插入图片描述

配置
  • /api接口将会被代理
    vue.config.js
const data = require('./src/data.json')
module.exports = {
  devServer: {
    proxy: {
      // 配置跨域
      '/api': {
        target: 'https://www.baidu.com/',
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
    before (app) {
      app.get('/api/data', (req, res) => {
        // res.send({ status: 0, message: [{ id: 0, name: 'fly' }] })
        res.send({ status: 0, message: data })
        console.log(1)
      })
    }
  }
}
数据
  • 可通过/api/data进行访问
    data.json
[
  {
    "name": "lay",
    "age": 13
  }
]
laker Zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解Vuex 模块化(module)
12-11
一、为什么需要模块化 前面我们讲到的例子都在一个状态树里进行，当一个项目比较大时，所有的状态都集中在一起会得到一个比较大的对象，进而显得臃肿，难以维护。为了解决这个问题，Vuex允许我们将store分割成模块（module），每个module有自己的state，mutation，action，getter，甚至还可以往下嵌套模块，下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....}, getters: {....} } const moduleB = { state:
Vuex 模块化详解
wuxian_wj的博客
12-20 6746
本篇主要讲vuex的模块化，虽然官网已经讲得比较细致了，但是在实践的时候还是踩了不少坑。今天就在这里把模块化使用过程中的细节都讲清楚，方便大家学习，也方便自己以后复习。 1.Vuex简单介绍 1.1 Vuex是什么 官方：Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（即通过提交mutation来更新状态） Vuex是适用于Vue项目开发时使用的状态管理工具。把组件中的共享状态抽取出来，以一个全局单例模式管理
vue - vuex详细讲解和modules模块化的使用
qq_43886365的博客
09-16 4597
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 通俗的来说，vuex是用于当某一状态需要在多个组件中共享，方便我们使用并追踪这些状态时使用。
【Vuex深入以及模块化编码】
小田是个程序员的博客欢迎你的到来呀~
03-19 1853
Vuex的深入理解，你值得拥有，头发可不能让他白掉呀！宝贝
nuxt框架中对vuex进行模块化设置的实现方法
12-04
1.2> 将 vuex 模块 加到 vendors 构建配置中去 1.3> 设置 Vue 根实例的 store 配置项 Nuxt.js 支持两种使用 store 的方式： 普通方式： store/index.js 返回一个 Vuex.Store 实例 模块方式： store 目录下的每个.js ...
vue2.0-theInitial:模块化构建 vuex项目，可以当初始版本
05-18
Markdown是一种轻巧且易于使用的语法，可用于样式化您的文字。 它包括以下约定 Syntax highlighted code block # Header 1 ## Header 2 ### Header 3 - Bulleted - List 1. Numbered 2. List **Bold** and _Italic_ ...
Vue2.6.10-typescript:基于Vue3.0+Typescript构建的空白项目，css样式的初始化，以及基本常用的axios,vue-router,模块化使用vuex，element-ui已经按需引入配置好，包括打包优化的cdn引入，代码压缩，图片压缩，关闭map等打包优化都已配置完成
05-25
基于Vue2.6.10+Typescript构建的空白项目，包括css样式的初始化，以及基本常用的axios,vue-router,模块化使用vuex，element-ui已经按需引入配置好，还有axios拦截器，axios请求的全局loaindg加载，路由组件懒加载，...
typed-vuex：vuex 4上的Typed包装器，可轻松使用Typescript
02-25
vuex型vuex 4上的类型化包装器，可轻松使用Typescript如何使用： 与直接使用vuex相比，安装并使用此包装器。 这将包装所有调用，并为您的商店推断正确的类型。 99％的API和用法将与vuex相同，但mapState / ...
vuex-module.zip
06-15
vuex模块化懒加载 解决vuex数据臃肿 数据庞大 引起的性能问题 使用我自定义的懒加载模式解决 适用于大型项目构建或者vuex太过于庞大
Vuex模块化使用
yyclassmvp的博客
03-14 1073
4.actions: 类似于methods,用于发起异步请求,比如axios。当项目复杂，我们可以模块化拆分用modules来拆分复杂业务。如果namespaced为false，则不需要额外补充模块名。如果namespaced为true，则需要额外去补充模块名。3.getters: 类似于vue中的计算属性。modules文件下是具体模块，可以有很多个。2.mutations: 使用它来修改数据。1.state 统一定义管理公共数据。5.modules: 模块拆分。
vuex的模块化
措手不及ya的博客
09-04 551
vuex模块化学习
vuex 模块化
weixin_45435854的博客
09-28 217
一般当项目比较大时，如果vuex 的modules模块过多，此时需要用到模块化来管理仓库。如果在index里引入modules中所有的文件，需在index.js中配置以下。比如在addController.js中定义一个变量。页面中通过getter取state属性。在getters.js中获取该属性。页面中存state属性。
vuex详解及模块化
许小墨的菜鸡博客
05-15 619
vue使用详解
Vuex模块化管理
文龙刚的博客
07-26 461
【代码】Vuex模块化管理。
vuex模块化
Liberty_yes的博客
02-10 6006
将store模块化（module），即每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
vuex模块化的使用
weixin_46194350的博客
05-05 330
vuex模块化的使用
Vuex：模块化Module :VCA模式
最新发布
Fanbin168的专栏
11-11 320
VCA中不支持辅助函数，因为辅助函数中是用this.$store，而VCA中没有绑定this的由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。这句话的意思是，如果把所有的状态都放在/src/store/index.js中，当项目变得越来越大的时候，Vuex会变得越来越难以维护分成模块化后，每个人负责自己的那个模块开发，然后在/src/store.index.js中将这些模块进行汇总，这样可以避免多人开发的协调问题。
vue+ vuex + ts如何使用modules模块化
09-06
首先，我们需要安装好Vue和Vuex，并使用TypeScript构建Vue项目。可以通过以下命令进行安装： ``` npm install vue vuex --save npm install typescript ts-loader --save-dev ``` 接下来，在根目录下创建`store`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值