Vue学习之旅----vuex不同组件间数据共享-状态一致

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

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 在vuex中用于存储数据
var state = {count: 1
}
// mutations里是放方法，主要改变state里的数
var mutations = {incCount () {state.count++}
}
// 实例化vuex的store
const store = new Vuex.Store({state,mutations
})
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}}</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="news">我是用户组件<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></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')}},mounted () {this.actions = [{name: '拍照',method: this.takePhoto}, {name: '从相册中选择',method: this.openAlbum}]}
}
</script>
<style lang="scss" scoped>
</style>

Vue学习之旅----vuex不同组件间数据共享-状态一致相关推荐

阿菜的Vue学习之旅（一）
阿菜的Vue学习之旅(一) 1.Vue的初步使用 2.关于MVVM架构的Vue设计 1.Vue的初步使用刚刚开始接触Vue的时候,阿菜是这样写 html部分: <div id="me ...
Vue学习笔记（二）组件化和模块化
Vue学习笔记(二)组件化和模块化前言组件化什么是组件化 1.基础使用 2.全局组件和局部组件 3.语法糖和模板抽离 4.组件的data为什么是函数 5.父子组件 5.1 父子组件 5.2 父子 ...
Vue.js中的8种组件间的通信方式；3个组件实例是前6种通信的实例，组件直接复制粘贴即可看到运行结果
文章目录一.$children / $parent 二.props / $emit 三.eventBus 四.ref 五.provide / reject 六.$attrs / $listeners ...
少侠请重新来过 - Vue学习笔记(八) - Vuex
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. State Vuex ...
vue项目原理分析-1：组件间传值
整个项目目录(create project后) vue.config.js的配置 // vue.config.js 常⽤配置 module.exports = {devServer:{port:333 ...
Vue学习笔记（二） —— 组件开发
简介在了解了Vue语法的基础知识和常用特性之后,在进行正式的开发之前,非常有必要的对组件化的相关知识进行了解.本文就是为介绍组件的相关知识点的. 1.组件化开发思想现实生活中的组件化思想主要是:标 ...
Vue学习二：安装element-ui组件库
上一章:搭建Vue环境搭建完vue环境后,安装element-ui使用其组件库,提高开发效率. 1.打开cmd,cd到在项目目录下执行npm install element-ui,安装完成后,查看 ...
【Vue学习第三天】组件的使用
整理的内容 Vue中组件的一些用法和概念创建组件父子组件传值组件的切换使用slot分发内容什么是组件组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ...
Vue学习记录 (ref,生命周期,组件,router)
ref="名称":注册引用信息 this.$ref.名称:获取对象(此为操作dom节点) 计算属性:computed 在差值表达式中调用此函数会直接返回计算结果,而不是函数本身当 ...
Vue学习之旅-02
Vue02 7. 循环遍历 8. v-model的使用 9. 组件化开发 10. 组件通信 11. 插槽 7. 循环遍历 v-for遍历数组 <div id="app"> ...

Vue学习之旅----vuex不同组件间数据共享-状态一致

Vue学习之旅----vuex不同组件间数据共享-状态一致相关推荐

最新文章

热门文章