Skip to main content

第一个Demo

store文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
strict: false,
state: {
count: 1
},
mutations: {
increase () {
this.state.count++
}
},
actions: {
},
modules: {
}
})

加1的文件

<template>
<div class="list">
<h1>This is an List page</h1>
<button @click="add()" > 加加{{msg}} </button>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: 'list',
data () {
return {
msg: 'ddddddddddddd'
}
},
methods: {
add () {
console.log('aa')
store.commit('increase') // 传递给store文件的increase方法
}
}
}
</script>

显示count的文件

<template>
<div class="about">
<h1>This is an about page</h1>
<p> {{ msg }} </p>
</div>
</template>
<script>
export default {
name: 'about',
data () {
return {
msg: this.$store.state.count
}
}
}
</script>

或者

<template>
<div class="about">
<h1>This is an about page</h1>
<p> {{ msg }} </p>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: 'about',
store: store,
data () {
return {
msg: store.state.count
}
}
}
</script>