使用Vuex的步骤:

(1)安装:

  1.使用npm安装:

    

npm install vuex  --save

  

  2.使用script标签引入

    

<script src="/path/to/vue.js"></script>

<script src="/path/to/vuex.js"></script>

  

  如果使用第一种方式安装Vuex插件,在使用Vuex插件之前需要在main.js入口文件中

    1‘ 使用import方式引入Vuex

      

import Vuex from ‘vuex’

  

    2‘ 使用Vue的插件引入函数Vue.use()使用Vuex

      

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;
}
}
}

注意事项: 

  基本组成:

    注意到这个store对象包含三个子对象:

      state、mutations、actions

    其中state用于存储数据,类似vue实例的data属性。

    mutations用于递交更改,对state对象中的属性数据进行更改。

    actions用于进行递交异步更改,通过调用mutations实现对数据的更改。

  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;
}
}
}

简单使用Vuex步骤及注意事项的更多相关文章

  1. 简单的vuex 的使用

    1. npm install vuex 2. 在src 下 新建文件夹 store (为什么是这个单词,vuex 是用来状态管理的,用储存一些组件的状态,取存贮之意),store 文件下 新建文件 i ...

  2. CodeFirst简单演示的步骤

    CodeFirst简单演示的步骤 创建实体类[Student] public class Student { public long Id { get; set; } public string Na ...

  3. 【Azure Redis 缓存 Azure Cache For Redis】Azure Redis由低级别(C)升级到高级别(P)的步骤和注意事项, 及对用户现有应用的潜在影响,是否需要停机时间窗口,以及这个时间窗口需要多少的预估问题

    问题描述 由于Azure Redis的性能在不同级别表现不同,当需要升级/缩放Redis的时候,从使用者的角度,需要知道有那些步骤? 注意事项? 潜在影响?停机事件窗口? 升级预估时间? 解决方案 从 ...

  4. spring4+hibernate4+struts2项目整合的步骤及注意事项

    首先,在整合框架之前,我们需要知道Spring框架在普通Java project和Web project中是略有不同的. 这个不同地方就在于创建IOC容器实例的方式不同,在普通java工程中,可以在m ...

  5. MySQL主备停机步骤与注意事项

    双十一马上到了,一堆的事情,今天登录mysql数据库服务器的时候突然发现服务器时间戳不对,比北京时间快了几分钟,我的天...随后检查了其他的几台数据库服务器发现同样都存在不同的偏差,最小的比北京时间快 ...

  6. 自定义Camera综述(一般步骤、注意事项、遇到的难题<【内存溢出问题】>、像素参考)

    一般步骤: 1. 检查和访问Camera:创建代码来检查Camera和所申请访问的存在性: 2. 创建一个预览类:继承SurfaceView来创建一个Camera的预览类,并实现SurfaceHold ...

  7. cocos2d-x笔记2: 编译到安卓的步骤与注意事项

    博客地址: www.cnblogs.com/wolfred7464/ 不得不说,真心复杂,本篇博客总结的基本是最简最直接的步骤了,不用Cygwin和Ant的,当然用也可以... 以下用 %PROJEC ...

  8. redis cluster 集群搭建步骤和注意事项

    1.安装Ubuntu ,修改root的密码. sudo passwd  (apt-get update 更新系统) 2.安装 Gcc 和G++  sudo apt-get install build- ...

  9. Vuex 模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...

随机推荐

  1. Ocelot中文文档-Getting Started

    Getting Started Ocelot是只在.NET Core运行,目前基于netstandard2.0构建的.如果Ocelot适合你们的话,那么这个文档会有所帮助. .NET Core 2.0 ...

  2. [android] 手机卫士应用程序更新和签名

    弹出升级对话框 获取AlertDialog.Builder对象,通过new出来 调用Builder对象的setTitle()方法,参数:文本 调用Builder对象的setMessage()方法,参数 ...

  3. Vue 系列之 渲染与事件处理

    渲染相关 列表渲染 与 条件渲染 Vue 中的常见的渲染有 列表渲染 和 条件渲染 所谓条件渲染,则是通过添加一定的逻辑条件来进行 Dom 元素的操作 v-if v-else v-else-if &l ...

  4. inheritCombination.js

    // 组合继承 // 其基本思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承 function Person(name){ this.name = name; th ...

  5. Python 字符串的操作

    字符串的拼接 a = "hello" b = "klvchen" c = a + b print(c) 结果: helloklvchen 注意:该方法效率比较低 ...

  6. css div相对屏幕永远居中

    不管屏幕如何滑动,该div始终保持在屏幕正中央(支持IE7(包括IE7)以上版本) <div class="loginBox"></div> .loginB ...

  7. loadrunner 场景设计-制定负载测试计划

    by:授客 QQ:1033553122 场景设计-制定负载测试计划 步骤1.分析应用程序 你应该对硬件和软件组建,系统配置和典型的使用场景很熟悉.这些应用程序的分析保证你在使用loadrunner进行 ...

  8. SQLite保存报错sqlite.SQLiteConstraintException: UNIQUE constraint failed: ······ code 1555

    往数据库里保存数据的时候报错,用的afinal框架,明明在save操作之前执行了一遍deleteAll操作,还是报错. 百度了一下说报这种错有两种情况:一是定义的字段为not null ,插入时对应的 ...

  9. selenium获取cookie

    参考地址:https://www.cnblogs.com/lingwang3/p/7750156.html # 获取cookie import time from selenium import we ...

  10. python中json序列化的东东

    之所以写这个因为自己总是弄混了,容易弄错,记下来有事没事看看   序列化是指把变量从内存中变成可存储或传输的过程称之为序列化用(使用dump或者dumps),把变量内容从序列化的对象重新读到 内存里称 ...