vue入门之vuex状态管理

avatar 2019年04月28日17:33:45 6 2155 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
vuex的作用就是，当定义了一个状态，可以在不同组件中进行读取和修改。

本文通过一个简单例子，添加一个状态，然后在 info 页面改变这个值，在 about 页面获取。



1.在 views 添加 Info.vue
  1. <template>
  2.   <div>
  3.     <p>this is a info component</p>
  4.     <button type="button" @click="add()">添加</button>
  5.   </div>
  6. </template>
  8. <script>
  9.   import store from '@/store'
  10.   export default {
  11.     name: 'info',
  12.     data () {
  13.       return {
  14.         count: store.state.count
  15.       }
  16.     },
  17.     methods: {
  18.       add() {
  19.         console.log('增加成功')
  20.         store.commit('increase')
  21.       }
  22.     }
  23.   };
  24. </script>
  26. <style scoped>
  28. </style>



2.添加 store.js
  1. import Vue from 'vue';
  2. import Vuex from 'vuex';
  4. Vue.use(Vuex);
  6. export default new Vuex.Store({
  7.   state: {
  8.     count: 0
  9.   },
  10.   mutations: {
  11.     increase() {
  12.       this.state.count++;
  13.     }
  14.   },
  15.   actions: {
  17.   },
  18. });



3.编辑 About.vue
  1. <template>
  2.   <div class="about">
  3.     <h1>This is an about page</h1>
  4.     {{msg}}
  5.   </div>
  7. </template>
  9. <script>
  10.   import store from '@/store'
  11.   export default {
  12.     name: 'about',
  13.     store,
  14.     data () {
  15.       return {
  16.         msg: store.state.count
  17.       }
  18.     }
  19.   }
  20. </script>



chrome浏览器安装 Vue.js devtools 插件，可以用于显示 Vue 项目各种组件信息，很方便



在 info 页面点击按钮，然后跳到about页面，可以看到 count 的值
历史上的今天
四月
28日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0