单页面应用中引入vuex进行了数据的状态管理测试

        在单页面应用中引入vuex进行了数据的状态管理测试，同步是没问题的，异步数据发生改变，组件中拿到的是初始值，加上监听页面渲染可以了，但在组件中不能重新赋值给新变量进行相应操作，还没找到解决办法。

已解决：解决的方式为通过
computed:{
      loginVisible(){
        return  this.$store.state.courseData
      }
    },
然后在页面中进行正常的渲染

<h2>{{loginVisible}}</h2>
     <ul>
      <li v-for="(item,index) in loginVisible"> {{item.courseID}} </li>
    还有就是所有的数据全部放到了store里面


对应的代码在附件中



import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios"
// axios.defaults.baseURL="服务器端基础路径"
Vue.use(Vuex)


export default new Vuex.Store({
  state: {
    // 接口的前缀我们拿出来作为全局变量
    ctx: "http://47.92.104.238:8082/jxPro",
    courseData: [],
    courseObj:{},
  },
  mutations: {
    setCourseData(state, courseData) {
      debugger
      state.courseData = courseData
    }
  },
  actions: {
    // 获取课程数据
    getCourseData(context, page) {
      axios.get('http://47.92.104.238:8082/jxPro/courseInfoMgr/getCourseData.action?page=' + page + '&limit=9').then(res => {
        debugger
        // console.log(res.data)
        // 在action的请求结果中提交mutation
        // 因为context和$store是一致的，所以我们可以直接调用context的commit方法去提交mutation
        context.commit('setCourseData', res.data.data)
      })


    }
  },
  modules: {
  }
})

在组件中为

<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <banner-v1></banner-v1>
    <h1>{{showCourseData}}</h1>
     <h2>{{loginVisible}}</h2>
     <ul>
      <li v-for="(item,index) in loginVisible"> {{item.courseID}} </li>
    </ul>
  </div>
</template>


<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import bannerV1 from '@/components/bannerV1.vue'
export default {
  name: 'Home',
  data(){
    return{
      showCourseData:"我是本组件中的初始值"
    }
  },
  mounted(){
    this.$store.dispatch("getCourseData",1);
  },
  computed:{
      loginVisible(){
        return  this.$store.state.courseData
      }
    },
  methods:{
   
  },
  components: {
    HelloWorld,
    bannerV1
  }
}
</script>