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 Elenent实现表格相同数据列合并
Nov 30 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Python使用minidom读写xml的方法
2015/06/03 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python守护线程用法实例
2017/06/23 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
触摸春天教学反思
2014/02/03 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
学党史心得体会
2014/09/05 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
优质服务标语口号
2015/12/26 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL