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实现坐标拾取器功能示例
Nov 18 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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实现维护文件代码
2007/06/14 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JavaScript函数详解
2014/11/17 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
Python 开发Activex组件方法
2009/11/08 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python排序算法实例代码
2017/08/10 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 并发下载器实现方法示例
2019/11/22 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
优良学风班申请材料
2014/02/13 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
老龙头导游词
2015/02/11 职场文书
四群教育工作总结
2015/08/10 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android