1、在项目下安装vuex:npm install vuex --save-dev
2、在main.js中注册vuex:
import Vuex from 'vuex' //注册vuex
import store from './vuex/store' //某一值的初始状态及改变方法
new Vue({
el: '#app',
router,
store, //添加该项store
components: { App },
template: '<App/>'
})
3、搭建store.js
store.js的内容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
age: '0' //存储了一个公共状态age
},
mutations : {
showAge(state, msg){
state.age= msg;
}
}
})
export default store
4、使用小案例
home.vue (组件1)
<template>
<div class="components1">
<div>
<input type="text" v-model="msg" />
<input type="button" v-on:click="setName" value="设置" />
</div>
</div>
</template>
<script>
export default {
name: 'components1',
data(){
return {
msg : ''
}
},
methods : {
setName(){
this.$store.commit( 'showAge', this.msg ); //在组件1中修改组件3的状态
}
}
}
</script>
home1.vue(组件2)
<template>
<div>
<h3>看这里,我在变化:{{myAge}}</h3>
</div>
</template>
<script>
export default {
name : "components3",
computed : {
//一般会在组件的计算属性(computed)获取state的数据
//(因为,计算属性会监控数据变化,一旦发生改变就会响应)
myAge (){
return this.$store.state.age;
}
}
}
</script>
app.vue
<template>
<div id="app">
<p>在输入框里面输入值,后面的数据也会变化</p>
<home></home>
//在组件2中渲染出组件1的值,并且在改变state中的age时,组件2中的组件1也会更新。
<home1></home1>
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
import home from './components/home';
import home1 from './components/home1';
export default {
name: 'app',
components : {
home,
home1
}
}
</script>
5、效果图