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使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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中对数据库操作的封装
2006/10/09 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
jquery编写日期选择器
2017/03/16 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python实现飞机大战
2018/09/11 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python如何删除文件、目录
2020/06/23 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
static关键字的用法
2013/10/07 面试题
迎接领导欢迎词
2014/01/11 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
英语专业求职信
2014/07/08 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
综合实践活动报告
2015/02/05 职场文书
公务员年度个人总结
2015/02/12 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis