Vue学习之旅----vuex实现不同组件的数据共享数据持久化

vuex实现不同组件的数据共享数据持久化

当我们清除congsole和network后，刷新一次，算是第一次请求，然后切换选项卡，当再回到用户后，没有再请求接口数据，只是加载vuex里的数据，即缓存到list里的数据.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 在vuex中用于存储数据
var state = {count: 1,list: []
}
// mutations里是放方法，主要改变state里的数
var mutations = {incCount () {state.count++},// 要传值，必须写stateaddList (state, data) {state.list = data}
}
// getter 有点类似计算属性 改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)
var getters = {computedCount (state) {return state.count * 2}
}
/*
4、 基本没有用
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
*/
var actions = {// 因此你可以调用 context.commit 提交一个 mutationincMutationsCount (context) {// 执行 mutations 里面的incCount方法 改变state里面的数据context.commit('incCount')}
}
// 实例化vuex的store
const store = new Vuex.Store({state,mutations,getters,actions
})
export default store

<template><!-- 所有的内容要被根节点包含起来 --><div id="home">我是首页组件<button @click="goNews()">通过js跳转到新闻页面</button><mt-button type="default">default</mt-button><br><mt-button type="primary">primary</mt-button><mt-index-list><mt-index-section index="A"><mt-cell title="Aaron"></mt-cell><mt-cell title="Alden"></mt-cell><mt-cell title="Austin"></mt-cell></mt-index-section><mt-index-section index="B"><mt-cell title="Baldwin"></mt-cell><mt-cell title="Braden"></mt-cell></mt-index-section><mt-index-section index="C"><mt-cell title="ccc"></mt-cell><mt-cell title="ccccc"></mt-cell></mt-index-section><mt-index-section index="D"><mt-cell title="DDD"></mt-cell><mt-cell title="DDDD"></mt-cell></mt-index-section><mt-index-section index="Z"><mt-cell title="Zack"></mt-cell><mt-cell title="Zane"></mt-cell></mt-index-section></mt-index-list><hr><h2>调用store里的数据{{this.$store.state.count}}----{{this.$store.getters.computedCount}}</h2><button @click="changeCount()">改变store里的值</button></div>
</template>
<script>
// 引入store
import store from '../Vuex/store'
export default {data () {return {msg: '我是一个home组件'}},// 注册storestore,methods: {goNews () {this.$router.push({ name: 'news' })},changeCount () {// 改变vuex store里的值// 触发vuex store 里的mutations里的incCount方法this.$store.commit('incCount')}}
}
</script>
<style lang="scss" scoped>
</style>

<template><div id="user">我是用户组件<br><v-actionsheet></v-actionsheet><br><mt-button @click.native="flag = true" size="large">选择用户头像</mt-button><mt-actionsheet :actions="actions" v-model="flag"></mt-actionsheet><hr><h2>调用store里的数据{{this.$store.state.count}}</h2><button @click="changeCount()">改变store里的值</button><hr><ul><li v-for="(item,index) in list" :key=index>{{item.title}}</li></ul></div>
</template>
<script>
import store from '../Vuex/store'
import ActionSheet from './ActionSheet.vue'
export default {data () {return {msg: '我是一个用户组件',list: [],flag: false,actions: []}},// 注册storestore,components: {'v-actionsheet': ActionSheet},methods: {takePhoto () {alert('执行拍照')},openAlbum () {alert('打开相册')},changeCount () {// 改变vuex store里的值// 触发vuex store 里的mutations里的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.listconsole.log(listData.length)if (listData.length > 0) {this.list = listData} else {this.requestData()}this.actions = [{name: '拍照',method: this.takePhoto}, {name: '从相册中选择',method: this.openAlbum}]}
}
</script>
<style lang="scss" scoped>
</style>

<template><div id="app"><router-link to="/home">首页</router-link><router-link to="/news">新闻</router-link><router-link to="/user">用户</router-link><router-view /></div>
</template><script>
export default {name: 'App'
}
</script><style lang='scss' scoped>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
</style>

Vue学习之旅----vuex实现不同组件的数据共享数据持久化相关推荐

阿菜的Vue学习之旅（一）
阿菜的Vue学习之旅(一) 1.Vue的初步使用 2.关于MVVM架构的Vue设计 1.Vue的初步使用刚刚开始接触Vue的时候,阿菜是这样写 html部分: <div id="me ...
小猪的Python学习之旅 —— 20.抓取Gank.io所有数据存储到MySQL中
小猪的Python学习之旅 -- 20.抓取Gank.io所有数据存储到MySQL中标签:Python 一句话概括本文: 内容较多,建议先mark后看,讲解了一波MySQL安装,基本操作,语法速成, ...
Vue学习笔记（2）（组件化开发）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili 组件化 1. 什么是组件化? 组件化是Vue.js中的重要思想它提 ...
Vue学习（十六）：组件间通信
1. props 1.1 使用功能:让组件接收外部传过来的数据传递数据:<Demo name="xxx"/> 接收数据: 第一种方式(只接收):props:['na ...
Vue学习之旅-02
Vue02 7. 循环遍历 8. v-model的使用 9. 组件化开发 10. 组件通信 11. 插槽 7. 循环遍历 v-for遍历数组 <div id="app"> ...
少侠请重新来过 - Vue学习笔记(八) - Vuex
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. State Vuex ...
【Vue】如何使用vuex解决兄弟组件传值?
目录 vuex全局数据管理 vuex介绍组件关系和通信方案 vuex使用场景 vuex使用流程 vuex核心概念-state getters派生状态(计算属性) vuex核心概念-Mutations ...
vue学习之关于element日历calendar组件中上月，今天，下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习. 显示效果图: 本月: 上月: 下月: 下方是源码 <template> &l ...
Vue学习笔记（十九）——组件props信息的修改
本文主要介绍一下组件对props(即传入参数)的处理. props是父组件给子组件传递的参数,而子组件需要修改props的场景非常多,但props并不像组件自己的属性那样可以随意修改(因为props会 ...
Vue学习之旅Part1：Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
在Vue里有好几种数据渲染的方法及相关指令下面将一一介绍: 一.插值表达式插值表达式是用两个花括号{{}}包裹属性属性在Vue实例里定义: 通过Vue提供的指令即可很方便地将数据渲染到页面上 ...

Vue学习之旅----vuex实现不同组件的数据共享数据持久化

Vue学习之旅----vuex实现不同组件的数据共享数据持久化相关推荐

最新文章

热门文章

Vue学习之旅----vuex实现不同组件的数据共享 数据持久化

Vue学习之旅----vuex实现不同组件的数据共享 数据持久化相关推荐

最新文章

热门文章

Vue学习之旅----vuex实现不同组件的数据共享数据持久化

Vue学习之旅----vuex实现不同组件的数据共享数据持久化相关推荐