美文网首页
8-9 Vue项目城市选择页 - Vuex实现数据共享

8-9 Vue项目城市选择页 - Vuex实现数据共享

作者: 废柴阿W | 来源:发表于2018-10-28 11:33 被阅读0次

state:存放共用数据
actions:异步方法
mutations

  • 项目中引入router插件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path:'/city',
      name :'City',
      component: City
    }

  ]
})
  • 项目中引入Vuex插件
import Vuex from 'vuex'
import Vue from 'vue'
 Vue.use(Vuex)
  export default new Vuex.Store({
    state:{
      city : '深圳'
    }
  })

$store 指点是Vuex.Store


动态改变数据


当异步操作要更改的数据比较简单不用进行太多处理时,可以直接跳过Actions到Mutations操作

额外小点(路由跳转)

编程式导航

相关文章

  • 8-9 Vue项目城市选择页 - Vuex实现数据共享

    state:存放共用数据actions:异步方法mutations 项目中引入router插件 项目中引入Vuex...

  • vuex

    官方推荐的数据框架:在vue的开发中 vue实现视图层的开发,vuex来实现数据层,实现数据共享 vuex是整个虚...

  • Vue扩展

    VueX HTTP是无状态的,跨页面的数据无法共享,但Vue是单页面应用,VueX可以实现数据共享; VueX的更...

  • vuex的简单用法

    一、什么是vuex vuex是在vue项目中实现数据共享的框架。用于当多个组件进行复杂的数据传值很困难的时候。这时...

  • 这些年使用的技术栈总结

    Vue2.0:实现前端页面构建 Vuex:实现不同组件间的状态共享 Vue-router:页面路由切换,实现单页的...

  • 前端学习笔记三十六-Vuex

    一、Vuex概述 Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享。 使用Vue...

  • Vuex

    1. Vuex概述 Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享 使用Vue...

  • Vuex(state/mutations/getters)

    Vuex是什么? Vuex是Vue配套的公共数据管理工具,我们可以将共享的数据保存到Vuex中,方便项目中的任何组...

  • vuex 解析

    vuex 是 Vue 配套的 公共数据管理工具,它可以实现数据的共享,在复杂的项目中避免了父子/子父/祖孙间通讯的...

  • Vuex|Vue集中式数据管理插件

    Vuex简介 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中管...

网友评论

      本文标题:8-9 Vue项目城市选择页 - Vuex实现数据共享

      本文链接:https://www.haomeiwen.com/subject/odqjtqtx.html