粗糙实现一个类 Vuex 的 Store 状态管理器

Question

未统一管理组件状态时

项目目录结构：

src
  - components
    - NewsDetail.vue
    - NewsList.vue
  - App.vue
  - main.js

main.js ：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

// 安装插件
Vue.use(VueRouter)

// 设置不需要在控制台中打印当前处于开发环境下的消息
Vue.config.productionTip = false

// 创建 Vue 实例，并挂载 Vue 组件
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue ：

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
  import VueRouter from 'vue-router'
  import NewsList from './components/NewsList'
  import NewsDetail from './components/NewsDetail'

  const router = new VueRouter({
    routes: [
      { path: '/', component: NewsList},
      { path: '/news/:id', component: NewsDetail }
    ]
  })

  export default {
    name: 'App',
    router
  };
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

NewsList.vue ：

<template>
  <div>
    <dl>
      <dt>新闻列表</dt>
      <dd v-for="news in newsList" :key="news.id">
        <router-link :to="'/news/' + news.id">
          {{ news.id }} - {{ news.title }}
        </router-link>
      </dd>
    </dl>
  </div>
</template>

<script>
  export default {
    name: 'NewsList',
    data() {
      return {
        newsList: []
      }
    },
    created() {
      this.loadNews()
    },
    methods: {
      loadNews() {
        const newsData = [
          { id: 101, title: 'TikTok 用什么算法传输并加密内容？', content: '最近，美国计划让微软收购视频分享社交网络移动应用 TikTok，因为“它对美国国家安全构成了风险”，必须交由美国本土的科技公司管理。TikTok 最近得到了多家媒体的报道，但其中又有多少是真实的呢？每篇文章都会回答一个非常具体的问题。现在，是时候把事实重新摆回桌面了。' },
          { id: 102, title: '【Kafka】生产者客户端小结（java）', content: 'KafkaProducer 中一般会发生两种类型的异常：可重试的异常和不可重试的异常。常见的可重试异常有：NetworkException、LeaderNotAvailableException、UnknownTopicOrPartitionException、NotEnoughReplicasException、NotCoordinatorException 等。比如 NetworkException 表示网络异常，这个有可能是由于网络瞬时故障而导致的异常，可以通过重试解决；又比如 LeaderNotAvailableException 表示分区的 leader 副本不可用，这个异常通常发生在 leader 副本下线而新的 leader 副本选举完成之前，重试之后可以重新恢复。不可重试的异常，比如 RecordTooLargeException 异常，暗示了所发送的消息太大，KafkaProducer 对此不会进行任何重试，直接抛出异常。' }
        ]

        this.newsList = newsData
      }
    }
  };
</script>

<style scoped>

</style>

NewsDetail.vue ：

<template>
  <div>
    <h3>
      {{ newsDetail.title }}
    </h3>
    <div>
      {{ newsDetail.content }}
    </div>
    <div>
      <router-link to="/">返回新闻列表</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NewsDetail',
    data() {
      return {
        newsDetail: {}
      }
    },
    created() {
      this.loadNews()
    },
    methods: {
      loadNews() {
        const newsData = [
          { id: 101, title: 'TikTok 用什么算法传输并加密内容？', content: '最近，美国计划让微软收购视频分享社交网络移动应用 TikTok，因为“它对美国国家安全构成了风险”，必须交由美国本土的科技公司管理。TikTok 最近得到了多家媒体的报道，但其中又有多少是真实的呢？每篇文章都会回答一个非常具体的问题。现在，是时候把事实重新摆回桌面了。' },
          { id: 102, title: '【Kafka】生产者客户端小结（java）', content: 'KafkaProducer 中一般会发生两种类型的异常：可重试的异常和不可重试的异常。常见的可重试异常有：NetworkException、LeaderNotAvailableException、UnknownTopicOrPartitionException、NotEnoughReplicasException、NotCoordinatorException 等。比如 NetworkException 表示网络异常，这个有可能是由于网络瞬时故障而导致的异常，可以通过重试解决；又比如 LeaderNotAvailableException 表示分区的 leader 副本不可用，这个异常通常发生在 leader 副本下线而新的 leader 副本选举完成之前，重试之后可以重新恢复。不可重试的异常，比如 RecordTooLargeException 异常，暗示了所发送的消息太大，KafkaProducer 对此不会进行任何重试，直接抛出异常。' }
        ]

        const newsId = this.$route.params.id

        newsData.forEach(news => {
          if (news.id === +newsId) {
            this.newsDetail = news
          }
        })
      }
    }
  };
</script>

<style scoped>

</style>

统一管理组件状态后

目录结构：

src
  - components
    - NewsDetail.vue
    - NewsList.vue
  - store
    - index.js
  - App.vue
  - main.js

store/index.js ：

export default {
  state: {
    newsList: [],
    newsDetail: {}
  },
  updateState(stateName, stateVal) {
    this.state[stateName] = stateVal

    // 打印日志
    console.log(`更新${ stateName }的值为：${ JSON.stringify(stateVal) }`)
  }
}

main.js ：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Store from './store'

// 添加 Vue 实例变量
Vue.prototype.$store = Store

// 安装插件
Vue.use(VueRouter)

// 设置不需要在控制台中打印当前处于开发环境下的消息
Vue.config.productionTip = false

// 创建 Vue 实例，并挂载 Vue 组件
new Vue({
  render: h => h(App),
}).$mount('#app')

NewsList.vue ：

<template>
  <div>
    <dl>
      <dt>新闻列表</dt>
      <dd v-for="news in this.$store.state.newsList" :key="news.id">
        <router-link :to="'/news/' + news.id">
          {{ news.id }} - {{ news.title }}
        </router-link>
      </dd>
    </dl>
  </div>
</template>

<script>
  export default {
    name: 'NewsList',
    data() {
      return {
        // newsList: []
      }
    },
    created() {
      this.loadNews()
    },
    methods: {
      loadNews() {
        const newsData = [
          { id: 101, title: 'TikTok 用什么算法传输并加密内容？', content: '最近，美国计划让微软收购视频分享社交网络移动应用 TikTok，因为“它对美国国家安全构成了风险”，必须交由美国本土的科技公司管理。TikTok 最近得到了多家媒体的报道，但其中又有多少是真实的呢？每篇文章都会回答一个非常具体的问题。现在，是时候把事实重新摆回桌面了。' },
          { id: 102, title: '【Kafka】生产者客户端小结（java）', content: 'KafkaProducer 中一般会发生两种类型的异常：可重试的异常和不可重试的异常。常见的可重试异常有：NetworkException、LeaderNotAvailableException、UnknownTopicOrPartitionException、NotEnoughReplicasException、NotCoordinatorException 等。比如 NetworkException 表示网络异常，这个有可能是由于网络瞬时故障而导致的异常，可以通过重试解决；又比如 LeaderNotAvailableException 表示分区的 leader 副本不可用，这个异常通常发生在 leader 副本下线而新的 leader 副本选举完成之前，重试之后可以重新恢复。不可重试的异常，比如 RecordTooLargeException 异常，暗示了所发送的消息太大，KafkaProducer 对此不会进行任何重试，直接抛出异常。' }
        ]

        // this.newsList = newsData
        this.$store.updateState('newsList', newsData)
      }
    }
  };
</script>

<style scoped>

</style>

NewsDetail.vue ：

  <template>
    <div>
      <h3>
        {{ this.$store.state.newsDetail.title }}
      </h3>
      <div>
        {{ this.$store.state.newsDetail.content }}
      </div>
      <div>
        <router-link to="/">返回新闻列表</router-link>
      </div>
    </div>
  </template>

  <script>
    export default {
      name: 'NewsDetail',
      data() {
        return {
          // newsDetail: {}
        }
      },
      created() {
        this.loadNews()
      },
      methods: {
        loadNews() {
          const newsData = [
            { id: 101, title: 'TikTok 用什么算法传输并加密内容？', content: '最近，美国计划让微软收购视频分享社交网络移动应用 TikTok，因为“它对美国国家安全构成了风险”，必须交由美国本土的科技公司管理。TikTok 最近得到了多家媒体的报道，但其中又有多少是真实的呢？每篇文章都会回答一个非常具体的问题。现在，是时候把事实重新摆回桌面了。' },
            { id: 102, title: '【Kafka】生产者客户端小结（java）', content: 'KafkaProducer 中一般会发生两种类型的异常：可重试的异常和不可重试的异常。常见的可重试异常有：NetworkException、LeaderNotAvailableException、UnknownTopicOrPartitionException、NotEnoughReplicasException、NotCoordinatorException 等。比如 NetworkException 表示网络异常，这个有可能是由于网络瞬时故障而导致的异常，可以通过重试解决；又比如 LeaderNotAvailableException 表示分区的 leader 副本不可用，这个异常通常发生在 leader 副本下线而新的 leader 副本选举完成之前，重试之后可以重新恢复。不可重试的异常，比如 RecordTooLargeException 异常，暗示了所发送的消息太大，KafkaProducer 对此不会进行任何重试，直接抛出异常。' }
          ]

          const newsId = this.$route.params.id

          newsData.forEach(news => {
            if (news.id === +newsId) {
              // this.newsDetail = news
              this.$store.updateState('newsDetail', news)
            }
          })
        }
      }
    };
  </script>

  <style scoped>

  </style>