首先:
安装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/>'
-
})
四、测试