美文网首页
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实现数据共享

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