package.json
为dev添加--host 0.0.0.0

 "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

然后使用手机访问pc ip地址即可

安装

npm install vuex --save

使用

新建一个vuex文件,以下为./store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let defaultCity = '上海'

export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  actions: {
    changeCity (ctx, city) {
      ctx.commit('changeCity', city)
    }
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
    }
  }
})

ps:
state是一些需要共享的数据
actions(ctx, city)处理$store.dispatch(x)的请求,ctx代表上下文,city代表请求的数据
mutations(state, city) 处理actions中ctx的commit,state为数据结构,city为commit的数据

在main.js中引入store并注册

import store from './store'
new Vue({
  el: '#app',
  router: router1,
  store,
  components: { App },
  template: '<App/>'
})

在组件模板中的调用

<div class="button">{{this.$store.state.city}}</div>

修改数据

handleCityClick (city) {
  this.$store.dispatch('changeCity', city)
  // 可跳过dispatch直接commit
  // this.$store.commit('changeCity', city)
  this.$store.commit('changeCity', city)
}