美文网首页
Vue知识点

Vue知识点

作者: Sharise_Mo佩珊 | 来源:发表于2017-12-27 10:34 被阅读0次

    vue-router

    在mounted函数中获取从路由地址带过来的参数:
    • 定义动态路由: { path: 'new-shop/:store_id', name: 'newShop' }
    • 获取路由参数: this.$route.params.store_id
    路由重定向与路由跳转
    • this.router.push({name: 'homeIndex'}) // 往路由history栈中添加一条记录,这样按浏览器的返回键时会回退到上一个页面
    • this.$router.go(n) // 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)
    • this.$router.replace({name: 'honeIndex'}) // 替换掉当前history栈中的记录,重定向

    vuex

    • 在页面中用到storeid的时候
     computed: {
          ...mapGetters([
            'storeid'
          ]),
          storeid() {
            console.log(this.$store.state.shop.storeid)
            return this.$store.state.shop.storeid
          }
        },
    
    • 页面操作触发state变化时
    let id = res.data.id
    this.$store.commit('GET_STOREID', id)
    this.$store.dispatch('GetStoreId', id)
    
    • store文件
    // 门店模块的全局变量
    const shop = {
      state: {
        storeid: '',
      },
      mutations: {
        GET_STOREID: (state,store_id) => {
          state.storeid = store_id
          console.log('store-shop 中的 storeid为:')
          console.log(store_id)
        },
      },
      actions: {
        GetStoreId: ({ commit }, param) => {
          commit('GET_STOREID')
        }
      }
    }
    export default shop
    
    • 最后记得在store的统一出口引入模块,再导出

    相关文章

      网友评论

          本文标题:Vue知识点

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