import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/
var state={ count:1,
list:[]
} /*2.mutations里面放的是方法,方法主要用于改变state里面的数据
*/
var mutations={ incCount(){ ++state.count;
},
addList(state,data){ state.list = data;
}
} /*3、优点类似计算属性 , 改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/ var getters= { computedCount: (state) => {
return state.count*2
}
} /*
4、 基本没有用 Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
*/ var actions= {
incMutationsCount(context) { /*因此你可以调用 context.commit 提交一个 mutation*/ context.commit('incCount'); /*执行 mutations 里面的incCount方法 改变state里面的数据*/ }
} //vuex 实例化 Vuex.store 注意暴露
const store = new Vuex.Store({
state,
mutations,
getters,
actions
}) export default store;
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home" style="padding:20px;">
我是首页组件 -- {{this.$store.state.count}} ----{{this.$store.getters.computedCount}} <button @click="incCount()">增加数量+</button> </div>
</template> <script> //1. 引入store 建议store的名字不要变 import store from '../vuex/store.js'; //2.注册
export default{
data(){
return {
msg:'我是一个home组件',
value1: null, }
},
store,
methods:{
incCount(){
//改变vuex store里面的数据 //this.$store.commit('incCount'); /*触发 mutations 改变 state里面的数据*/ this.$store.dispatch('incMutationsCount'); /*触发 actions里面的方法 */
}
}
} </script> <style lang="scss" scoped> </style>
<template>
<div id="news">
我是新闻组件 --{{this.$store.state.count}} <br> <button @click="incCount()">增加数量</button> <br><br>
<br><br> <ul>
<li v-for="item in list"> {{item.title}}
</li>
</ul> </div> </template> <script>
//1. 引入store import store from '../vuex/store.js'; export default{
data(){
return {
msg:'我是一个新闻组件',
list:[] }
},
store,
methods:{ incCount(){ this.$store.commit('incCount');
}, requestData(){ //请求数据 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.get(api).then((response)=>{
console.log(response); //注意this指向 this.list=response.body.result; //数据放在store里面 this.$store.commit('addList',response.body.result); },function(err){ console.log(err); })
}
},mounted(){ //判断 store里面有没有数据
var listData=this.$store.state.list; console.log(listData.length); if(listData.length>0){
this.list=listData; }else{ this.requestData(); } }
} </script> <style lang="scss" scoped> .list{ li{
height:3.4rem; line-height:3.4rem; boder-bottom:1px solid #eee; font-size:1.6rem; a{ color:#666; }
}
} </style>

Vuex 的使用 State Mutation Getter Action的更多相关文章

  1. 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter

    先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...

  2. vuex mutation,action理解

    1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...

  3. vuex2.0 基本使用(2) --- mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  4. 【14】vuex2.0 之 mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  5. (转)vuex2.0 基本使用(2) --- mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  6. vuex 源码解析(三) getter属性详解

    有时候我们需要从store中的state中派生出一些状态,例如: <div id="app"> <p>{{reverseMessage}}</p> ...

  7. vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

    一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...

  8. vuex 之既生‘mutation’何生‘action’

    vuex 中,action 及 mutation 均为操作数据的作用而存在,既然二者均可改变数据,为什么要分成两个方法来处理呢,因为: Mutation 必须是同步函数 mutations: { so ...

  9. vuex中mutation和action的详细区别

    const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...

随机推荐

  1. 51nod 1396 还是01串

    给定一个0-1串s,长度为n,下标从0开始,求一个位置k,满足0<=k<=n, 并且子串s[0..k - 1]中的0的个数与子串s[k..n - 1]中1的个数相等. 注意: (1) 如果 ...

  2. CH6801 棋盘覆盖

    6801 棋盘覆盖 0x60「图论」例题 描述 给定一个N行N列的棋盘,已知某些格子禁止放置.求最多能往棋盘上放多少块的长度为2.宽度为1的骨牌,骨牌的边界与格线重合(骨牌占用两个格子),并且任意两张 ...

  3. C# 8.0 的新特性( NET Framework 4.8 与 Visual Studio 2019 )

    C#8.0 于 2019年4月 随 .NET Framework 4.8 与 Visual Studio 2019 一同发布 使用VS2019体检C#8.0新功能: 编辑.csproj文件,添加如下代 ...

  4. RabbitMQ 关键词

    RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现. RabbitMQ中间件分为服务端(RabbitMQ Server)和客户端 ...

  5. docker的笔记

    docker run 命令 docker run ubuntu:15.10 /bin/echo "Hello world" 各个参数解析: docker: Docker 的二进制执 ...

  6. 面试官常问的20道Java题目(附答案)-来自Java1234

    1. 以下代码的输出结果是(A) int i =3; i = i++; System.out.println(i); A .3  B.4  C.5 a=b++是先将b值赋值给a后b再自增. 2. Ma ...

  7. Kubernetes 学习17 dashboard认证及分级授权

    一.概述 1.我们前面介绍了kubernetes的两个东西,认证和授权 2.在kubernetes中我们对API server的一次访问大概会包含哪些信息?简单来讲它是restfule风格接口,也就是 ...

  8. js之大文件断点续传

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  9. suds

    Suds: 是一个轻量级的SOAP客户端 pip install suds 可以访问webservice 选择公网的Webservice,http://www.webxml.com.cn/webser ...

  10. P5025 [SNOI2017]炸弹

    原题链接  https://www.luogu.org/problem/P5025 闲话时刻: 第一道 AC 的黑题,虽然众人皆说水... 其实思路不是很难,代码也不是很难打,是一些我们已经学过的东西 ...