vue + vuex+ajax，数据没有保存到state里面

Question

vue发送ajax请求到的数据没有保存在vuex的 state里面
好像是...在请求的过程中数据保存了，请求结束，数据又不见了
代码如下

  data() {
    return {

    }
  },
  created(){
    console.log(this.$store.state.list)   //这是84行输出
    this.getNews()
    console.log(this.$store.state.list)  //这是86行输出
  },
  computed:{
    ...mapState(['list', 'cont', 'loading']),
    ...mapGetters(['addNews'])
  },
  methods: {
    getNews(){
      var url = 'http://www.toutiao.com/api/comment/list/?group_id=6364965628189327618&item_id=6364969235889783298&offset=0&count=10'
      this.$axios.get(url).then( res=> {
        this.$store.state.list = res.data.data.comments
        console.log(this.list)  //这是97行输出
      })
      console.log(this.list)  //这是99行输出
    },

vuex store.js代码如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 相当于data对象的状态对象
const state = {
    list: [],
    loading: false
}
// 包含了n个直接更新状态的方法的对象
const mutations = {

}
// 包含了n个间接更新状态的方法的对象
const actions = {

}
// 包含多个getter计算属性的对象
const getters = {

}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

页面运行后的输出：：

Answer 1

// 组件
this.$store.dispatch('addComment', res.data.data.comments)
// store
mutations: {
    ADD_COMMENT: (state, comment) => {
        state.comment = comment
    }
},
actions: {
  addComment({commit}, comments) {
        commit('ADD_COMMENT', comments)
    }
}

Answer 2

没懂你的数据没了是啥意思,97行那个请求是异步,先执行同步代码 99行先输出肯定没有数据,等相应数据回来了然后97行执行就有数据了,还有不建议直接修改$store.state 应该写个mutations 然后通过this.$store.commit(相应mutations,数据)去更新state

Answer 3

不要直接操作state, 使用dispatch