Vue+Vuex初体验

首先：

安装vuex

npm install vuex -S

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

注册路由

注册store

测试

---

一、需要有两个路由

 HelloWorld.vue如下

<template>
  <div class="hello">
    <h2>{{this.$store.state.count}}</h2>
    <button @click="inc">增加</button>
    <router-link to="/demo">go demo</router-link>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  methods:{
    inc:function(){
      this.$store.commit('inc')
    }
  }
}
</script>

 HelloDemo.vue如下

<template>
    <div>
        <h2>{{this.$store.state.count}}</h2>
        <router-link to="/">home</router-link>
        <button @click="deinc">减少</button>
    </div>
</template>
 
<script>
export default {
    name:'HelloDemo',
    methods:{
        deinc:function(){
            this.$store.commit('deinc')
        }
    }
}
</script>

---

二、注册路由

打开router-->index.js

import Vue from 'vue'
import Router from 'vue-router'
//分别引入两个组件
import HelloWorld from '@/components/HelloWorld'
import HelloDemo from '@/components/HelloDemo'
 
Vue.use(Router)
 
export default new Router({
  //配置路由参数
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/demo',
      name: 'HelloDemo',
      component: HelloDemo
    }
  ]
})

---

三、注册Store

打开main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex' //引入Vuex
 
Vue.use(Vuex)//使用Vuex
 
//定义store
const store = new Vuex.Store({
  //定义数据
  state:{
    count:0
  },
  //定义方法
  mutations:{
    inc(){
      this.state.count++
    },
    deinc(){
      this.state.count--
    }
  }
})
 
Vue.config.productionTip = false
 
new Vue({
  el: '#app',
  router,
  store,//将store注册在vue实例中
  components: { App },
  template: '<App/>'
})

---

四、测试