vuex结合php,vuex中store的使用介绍(附实例)
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一、状态管理(vuex)简介
vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。
二、状态管理核心
状态管理有5个核心,分别是state、getter、mutation、action以及module。分别简单的介绍一下它们:
1、state
state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。
2、getter
getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。
3、mutation
更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
4、action
action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action,则需要执行store.dispatch
5、module
module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。
三、实例
1.先建立一个store.js,然后引入vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {
userInfo: {}
}const mutations = {
updateUserInfo(state, infos) {
state.userInfo= infos
}
}
export default new Vuex.Store({
state,
mutations
})
这样一个简单的store.js就已经完成了。
在界面中我们要怎么使用这个建立的状态管理呢
一、设置(更新)数据首先在script下引入store.js
import store from 'store.js的路径'import {
mapMutations
}
from 'vuex'methods:{
...mapMutations([
'updateUserInfo'
])
}
在需要更新数据的地方,将数据更新进去this.updateUserInfo(data)
二、获取数据
import store from 'store.js的路径'import {
mapState
}
from 'vuex'computed: {
...mapState({
userInfo: 'userInfo'
})
},
created() {
console.log(this.userInfo)
}
在created || mounted || methods等需要的地方获取数据
注: 也可在同一页面设置&&获取数据import { mapMutations, mapState } from 'vuex'
相关推荐:
vuex结合php,vuex中store的使用介绍(附实例)相关推荐
- 深度学习中的Normalization模型(附实例公式)
来源:运筹OR帷幄 本文约14000字,建议阅读20分钟. 本文以非常宏大和透彻的视角分析了深度学习中的多种Normalization模型,从一个新的数学视角分析了BN算法为什么有效. [ 导读 ]不 ...
- python闭包应用实例_Python中的闭包详细介绍和实例
一.闭包 来自wiki: 闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外 ...
- Linux下Desktop文件入门,解析Deepin Linux系统中的Desktop文件,附实例讲解
以下内容为你解析 Deepin Linux 操作系统中的 Desktop Entry 文件,同时附上实例讲解. 概念 Desktop Entry 文件是 Linux 桌面系统中用于描述程序启动配置信息 ...
- python数据格式简介_Python中数据类型时间的介绍(附代码)
本篇文章给大家带来的内容是关于Python中数据类型时间的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.什么是时间数据类型 Python中表示时间类型的数据结构为 ...
- python中soup_python中BeautifulSoup的详细介绍(附代码)
本篇文章给大家带来的内容是关于python中BeautifulSoup的详细介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Beautiful Soup提供一些简单的. ...
- php eof 使用函数_PHP中EOF的用法介绍(附示例)
本篇文章给大家带来的内容是关于PHP中EOF的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. PHP EOF(heredoc)是一种在命令行shell(如sh.cs ...
- vuex中store 的mutation
vuex中store 的mutation 1.mutation 官方解释mutation: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation ...
- 只需三分钟!只需创建一个vuex.js文件,让你马上学会使用Vuex,尽管Vuex是个鸡肋!(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧!)
前情提示:有一天,我要实现一个效果→点击某个按钮改变一个全局变量,并且要让绑定了该变量的所有位置异步渲染.我试过用一个全局的js文件存放该变量,该变量值虽然改变了,但是没有做到异步渲染.接着我用win ...
- vuex 在非组件中调用 mutations 方法
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265566 ...
最新文章
- 关于学习tf.random.normal()和tf.random.uniform()的一点小总结
- const,readonly 这些你真的懂吗? 也许会被面试到哦。。。
- python gui 可视化开发工具_用c语言输出九九乘法口诀表
- Win7安装64位CentOS 6.4双系统详细过程
- Oracle提议将G1作为Java 9的默认垃圾收集器
- C语言再学习 -- 函数
- [css] 举例说明实现圆角的方式有哪些?
- python设计---空域增强之图片去噪(中值滤波、均值滤波、高斯滤波、双边滤波)
- nprogress页面加载进度条
- 两个栈实现队列 以及两个队列实现栈
- 事务失败返回_分布式事务有这一篇就够了!
- 手机图片怎么免费转换成PDF格式?教程来了
- JAVA程序员--壁纸
- android时钟计时器代码,android的Handle计时器实现代码
- ai钢笔工具怎么描线_AI分享:歪龙教你玩转钢笔工具
- ES实现自动补全查询
- isis学不到looback口的路由_随手装了台LEDE软路由,测试WAN口能否跑万兆(上篇)...
- 一、编程基础之计算机基础知识
- LaTeX pdf转eps格式
- 小米前端面经(社招)
热门文章
- pip is configured with locations that require TLS/SSL 解决
- 图像分类、目标检测、语义分割、实例分割和全景分割的区别
- LFD-A-Light-and-Fast-Detector
- WeightNet torch
- RecursionError: maximum recursion depth exceeded
- android c#websocket传送图片
- pelee yuface 手势模型
- ERROR: Failed to find Platform SDK with path: platforms;android-27
- python ffmpeg4 保存h264
- NVIDIA团队:利用神经网络生成极慢视频