Vue知识点

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的统一出口引入模块，再导出