Vuex的安装、使用及注意事项
使用Vuex的步骤:
(1)安装:
1.使用npm安装:
1
|
npm install vuex --save |
2.使用script标签引入
1
2
3
|
< script src="/path/to/vue.js"></ script > < script src="/path/to/vuex.js"></ script > |
如果使用第一种方式安装Vuex插件,在使用Vuex插件之前需要在main.js入口文件中
1‘ 使用import方式引入Vuex
1
|
import Vuex from ‘vuex’ |
2‘ 使用Vue的插件引入函数Vue.use()使用Vuex
1
|
Vue.use(Vuex); |
(2)安装之后可以通过Vuex实例对象的Store方法创建一个store对象:
var store = new Vuex.Store({
state:{
NewMsg:{
Msgs:[
{
title:'暂无消息',
content:'暂无消息!',
url:'#no_msg',
id:'no_msg'
}
]
},
},
mutations:{
modifyMsg (state,Obj){
if(state.NewMsg.Msgs[0].id === 'no_msg'){
state.NewMsg.Msgs.shift();
}
var obj = {
title:Obj.title,
content:Obj.content
};
obj.id = 'Msg_' + Obj.id;
obj.url = '#' + obj.id;
state.NewMsg.Msgs.push(obj);
}
},
actions:{
fetchMsg (context){
$.ajax({
url:'PHP/GetMsgs.php',
type:'GET',
data:{},
dataType:'json', success:function(response){
if ( typeof response === 'string') {
response = JSON.parse(response);
}
console.log(response);
$(response).each(function(k,v){
// console.log(v.id+v.title+v.content);
context.commit('modifyMsg',v);
});
}
});
}
}
});
(3)在Vue实例中注册store对象:
new Vue({
el: '#app',
router,
store,
created (){
store.dispatch('fetchMsg');
},
template: '<App/>',
components: { App }
})
(4)在组件中使用state数据:
必须通过computed属性使用state数据!否则state属性中的数据发生更改时不会反映在组件上!
export default {
computed: {
Msgs (){
var Msgs = this.$store.state.NewMsg.Msgs;
return Msgs;
}
}
}
注意事项:
基本组成:
注意vuex中几个核心概念:
state、mutations、actions、 getters、module
state:用于存储数据,类似vue实例的data属性。
mutations:用于递交更改,对state对象中的属性数据进行更改。
actions:用于进行递交异步更改,通过调用mutations实现对数据的更改。
getters:可以认为是store的计算属性;与计算属性一样,getter的返回值会根据它的依赖缓存起来,且只有当它的依赖值发生变化才会被重新计算
mapGetters:辅助函数,将 store 中的 getter 映射到局部计算属性:
module:将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
actions与mutations的区别:
其中actions区别于mutations的地方在于mutations只能进行同步更改,而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性
函数执行,而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。
定义actions与mutations属性函数的注意事项:
其中定义mutations属性函数时必须传递的第一个参数是state,因为要对state进行更改,第二个参数代表传入的新参数。mutations属性函数只接受两个参数,如果要同时更
改多个属性值,可以通过对象传入。
在actions属性函数中可以通过context.commit()方法触发mutations属性函数。定义actions属性函数时,必须传递的第一个参数是context,用于触发mutations函数。
触发actions与mutations属性函数的方法:
在子组件中通过this.$store.commit()方法触发mutations属性函数。在注册store的Vue实例中(第三步中将会讲到)可以通过store.commit()触发。
commit函数第一个参数是mutations的属性函数名,第二个参数是传入的新值。
actions属性函数中可以进行异步操作,比如通过ajax或者Vue.Resource()进行数据获取,获取数据后再通过context.commit()触发更改。
触发actions属性函数使用this.$store.dispatch()或者store.dispatch() (在注册store的Vue实例中)函数。dispatch函数传递的一个参数是actions属性函数名称。如果希望在
Vue实例创建完成还未挂载时就从后端获取数据,则可以在created钩子函数中调用actions属性函数。
在组件中访问数据中心state的注意事项:
在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后,组件会自动更新,则应该使用组件的computed属性定义数据,而
不是通过data属性定义。如果使用data定义组件数据,则state中的数据发生更改之后组件不会发生变化。
export default {
computed: {
Msgs (){
var Msgs = this.$store.state.NewMsg.Msgs;
return Msgs;
}
}
}
mapGetters使用:辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
module使用注意事项:
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象;当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
|
如果你希望使用全局 state
和 getter
,rootState
和 rootGetter
会作为第三和第四参数传入 getter,也会通过 context 对象的属性传入 action
Vuex的安装、使用及注意事项的更多相关文章
- vue(22)Vuex的安装与使用
前言 每一个 Vuex 应用的核心就是 store(仓库).store基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存 ...
- 【总结】在VirtualBox上面安装Mac的注意事项
看此文之前 http://www.crifan.com/category/work_and_job/virtual_machine/virtualbox-virtual_machine/ 此文仅仅是针 ...
- oracle11g安装教程(注意事项及图文教程)
Oracle安装与重装注意事项 1.安装oracle(**) 注意:安装Oracle之前确定自己的主机(计算机)名要保证计算机名是英文的. 1.oracle的安装文件不要放在含有中文的目录当中,如:d ...
- 4 vuex的安装
安装可以看,引入又问题https://blog.csdn.net/u014196765/article/details/78022065?locationNum=9&fps=1(引入) htt ...
- webpack快速入门——如何安装webpack及注意事项
1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...
- Lenovo E42-80安装Linux的注意事项
Lenovo E42-80安装Linux的注意事项 https://www.cnblogs.com/dylanchu/p/9750760.html 1. 用U盘做个liveCD While makin ...
- XAMPP安装及配置注意事项
1.下载对应版本以后,解压安装 2.设置环境变量中的path,即D:\xampp\mysql\bin 3.设置监听端口 4.解决端口冲突问题 5.各种测试网址注意事项 由于很晚了,先记录下来,明天补充 ...
- Ubuntu16.04 部署安装Docker容器 & 注意事项
一.部署安装Docker容器 1.1 Ubuntu下安装 crul sudo apt install curl curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多 ...
- VMware 安装 Mac OS 注意事项
Ø 简介 本文主要介绍使用 VMware 安装 Mac OS 的注意事项,主要包括一下内容: 1. 安装参考 2. 使用 VMware 运行 Mac OS 虚拟机注意事项 3. 解决 M ...
随机推荐
- 题解 CF292A 【SMSC】
蒟蒻本想发一篇黑题题解,没想到黑题竟然掉紫了QwQ. 趁着题解还只有几篇,赶紧来发一篇嘿嘿嘿. 这道题其实很简单,题解其实都不需要 AC代码: #include<bits/stdc++.h> ...
- python中输入三个整数x,y,z,请把这三个数由小到大输出。
输入三个整数x,y,z,请把这三个数由小到大排序,再把数组由大到小排序,再输出最大值和最小值! #定义一个空数组 numbers = [] #循环遍历,下面的4是控制循环次数 for i in ran ...
- [Nest] 01.初见nest.js
github nest 介绍 Nest 是一个用于构建高效,可扩展的 Node.js 服务器端应用程序的框架.它使用渐进式 JavaScript,内置并完全支持 TypeScript(但仍然允许开发人 ...
- 为什么要用消息队列 及 自己如何设计一个mq架构
1. 解耦:如左图, 系统a因为业务需求需要调用系统b,后续因为业务需求可能需要改代码调用系统c,甚至还要考虑被调用的系统挂了访问超时的问题.耦合性太高! 如右图, 系统a产生一条数据发送到消息队列里 ...
- Python numpy数据的保存和读取
在科学计算的过程中,往往需要保存一些数据,也经常需要把保存的这些数据加载到程序中,在 Matlab 中我们可以用 save 和 lood 函数很方便的实现.类似的在 Python 中,我们可以用 nu ...
- Kubernetes 入门-学习-nginx安装-dashboard安装
一.入门 1.Kubernetes中文社区---http://docs.kubernetes.org.cn/ 2.Kubernetes集群组件: - etcd 一个高可用的K/V键值对存储和服务发现系 ...
- Codeforces 913 二进制背包(柠檬水) 暴力贪心特殊背包(选题)
A B C 给你N(N<=30)种水瓶每种水瓶有无限个 每个的体积是2^(i-1)价格是cost[i] 要求你花最少的钱弄出L体积的水 先从前到后扫一遍cost[i+1]=min(cost[i+ ...
- L3-006. 迎风一刀斩
迎着一面矩形的大旗一刀斩下,如果你的刀够快的话,这笔直一刀可以切出两块多边形的残片.反过来说,如果有人拿着两块残片来吹牛,说这是自己迎风一刀斩落的,你能检查一下这是不是真的吗? 注意摆在你面前的两个多 ...
- KeSetEvent
KeSetEvent https://bbs.pediy.com/ dll inject dll注入
- 10年前文章_解决parted 编译出错问题
找到 include/site/i386-linux 文件,修改定义ac_cv_sizeof_off_t 的长度,从原来的4改为8 ac_cv_sizeof_off_t=8 删除 build_dir/ ...