点这里进入我的个人博客

Vue+Vuex初体验

首先:

安装vuex

npm install vuex -S

需要有两个组件(HelloWord.vue 和 HelloDemo.vue)[组件自定义]

注册路由

注册store

测试


一、需要有两个路由

 HelloWorld.vue如下

  1. <template>
  2. <div class="hello">
  3. <h2>{{this.$store.state.count}}</h2>
  4. <button @click="inc">增加</button>
  5. <router-link to="/demo">go demo</router-link>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'HelloWorld',
  11. methods:{
  12. inc:function(){
  13. this.$store.commit('inc')
  14. }
  15. }
  16. }
  17. </script>

 HelloDemo.vue如下

  1. <template>
  2. <div>
  3. <h2>{{this.$store.state.count}}</h2>
  4. <router-link to="/">home</router-link>
  5. <button @click="deinc">减少</button>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name:'HelloDemo',
  11. methods:{
  12. deinc:function(){
  13. this.$store.commit('deinc')
  14. }
  15. }
  16. }
  17. </script>

二、注册路由

打开router-->index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. //分别引入两个组件
  4. import HelloWorld from '@/components/HelloWorld'
  5. import HelloDemo from '@/components/HelloDemo'
  6. Vue.use(Router)
  7. export default new Router({
  8. //配置路由参数
  9. routes: [
  10. {
  11. path: '/',
  12. name: 'HelloWorld',
  13. component: HelloWorld
  14. },
  15. {
  16. path: '/demo',
  17. name: 'HelloDemo',
  18. component: HelloDemo
  19. }
  20. ]
  21. })

三、注册Store

打开main.js

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import Vuex from 'vuex' //引入Vuex
  5. Vue.use(Vuex)//使用Vuex
  6. //定义store
  7. const store = new Vuex.Store({
  8. //定义数据
  9. state:{
  10. count:0
  11. },
  12. //定义方法
  13. mutations:{
  14. inc(){
  15. this.state.count++
  16. },
  17. deinc(){
  18. this.state.count--
  19. }
  20. }
  21. })
  22. Vue.config.productionTip = false
  23. new Vue({
  24. el: '#app',
  25. router,
  26. store,//将store注册在vue实例中
  27. components: { App },
  28. template: '<App/>'
  29. })

四、测试

posted @ 2019-12-21 00:11  xueshuai  阅读(185)  评论(0编辑  收藏  举报