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生命周期的深入理解
Dec 03 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 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 面向对象实现代码
2009/11/11 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python 录制系统声音的示例
2020/12/21 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
Unix如何在一行中运行多个命令
2015/05/29 面试题
什么是servlet
2012/05/08 面试题
往来会计岗位职责
2013/12/19 职场文书
学校文明单位申报材料
2014/05/06 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL