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>

  
  

---

二、注册路由

扫描二维码关注公众号，回复： 8260479 查看本文章

打开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/>'
})
  
  

---

四、测试