vuex的使用和简易实现


Posted in Vue.js onJanuary 07, 2021

这里记录一下vuex的使用和vuex的简易实现

首先创建对应的store目录和对应的入口index.js

import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
 strict: process.env.NODE_ENV !== 'production',
 state: {
  count: 0,
  msg: 'Hello Vuex'
 },
 getters: {
  reverseMsg (state) {
   return state.msg.split('').reverse().join('')
  }
 },
 mutations: {
  increate (state, payload) {
   state.count += payload
  }
 },
 actions: {
  increateAsync (context, payload) {
   setTimeout(() => {
    context.commit('increate', payload)
   }, 2000)
  }
 },
 modules: {
  products,
  cart
 }
})
  • 首先注册vuex的插件
  • 开发阶段开启strict严格模式
  • 配置初始的state
  • 配置对应的getters
  • 配置对应的mutations 无副作用的函数更新
  • 配置actions在此做异步处理
  • 最后配置模块
  • 模块中配置:
const state = {}
const getters = {}
const mutations = {}
const actions = {}

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

配置模块命名空间namespaced:true 导入store时的模块名

使用的时候

vuex的使用和简易实现

可以 通过一些对应的vuex提供的方法把store中的对应属性和方法拿到组件中

vue父子通信

vuex的使用和简易实现

vuex的使用和简易实现

vuex的使用和简易实现

或者就是自定义 组件的 v-model

非父子组件:Event Bus
我们可以使用一个非常简单的 Event Bus 来解决这个问题:

vuex的使用和简易实现

vuex的使用和简易实现

vuex的使用和简易实现

还有一种需要注意的,外部props转换为内部state

name: 'ArticleMeta',
 props: {
  article: {
   type: Object,
   required: true
  },
  user: {
   type: Object
  }
 },
 data () {
  return {
   currentArticle: this.article, isDelete: false
  }
 },

以上就是vuex的使用和简易实现的详细内容,更多关于vuex的使用和实现的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 #Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 #Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 #Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
详解Vue2的diff算法
Jan 06 #Vue.js
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python递归实现汉诺塔算法示例
2018/03/19 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
中国入世承诺
2014/04/01 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2016年国培研修日志
2015/11/13 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Python3 类型标注支持操作
2021/06/02 Python