vue+ssr+axios

git地址：https://github.com/317482454/vue-axios-ssr

懒懒的撸了一个vue-ssr demo

Vue在ssr模式需要注意第三方插件不一定支持，因为先在渲染node端，node是没有window对象，避免使用 如果要使用先声明--》判断如果是客户端执行

 let Btn  
 if (process.env.VUE_ENV === 'client') {  
   Btn = require('')  
 }  
 export default {  
   components: {  
     Btn  
   } 

请求接口操作 现在server.js里面创建路由

app.get('/api/getMusic', (req, res) => {
  axios.get('http://www.sojson.com/api/qqmusic/8446666/json')
    .then(function (response) {
      res.json({list: response.data})
    })
    .catch(function (error) {
      console.log(error)
    })
})

vuex-->store

 state: {
      musicList:[]
    },
    actions: {
      getMusic({ commit }) {
        return axios.get('http://localhost:8080/api/getMusic').then((res) => {
          commit('setMusic', res.data.list)
        })
      }
    },
    mutations: {
      setMusic (state, list) {
        state.musicList = list
      }
    }

vue组件使用先申明asyncData

asyncData ({ store }) {
    return store.dispatch('getMusic')
  }

直接使用$store.state.musicList.data.playlist就行了

v-for里面使用方法：v-for="person in ppl('aib')" ，需要判断是否有值 ppl (tag) { return this.$store.state.musicList.data.playlist==''?[]:this.$store.state.musicList.data.playlist.filter(p => p.groups[tag]) }