vue入门之vuex状态管理

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>
  7. <script>
  8.   import store from '@/store'
  9.   export default {
  10.     name: 'info',
  11.     data () {
  12.       return {
  13.         count: store.state.count
  14.       }
  15.     },
  16.     methods: {
  17.       add() {
  18.         console.log('增加成功')
  19.         store.commit('increase')
  20.       }
  21.     }
  22.   };
  23. </script>
  24. <style scoped>
  25. </style>

 

2.添加 store.js

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

 

3.编辑 About.vue

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

 

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

 

在 info 页面点击按钮,然后跳到about页面,可以看到 count 的值

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: