5 Vuex组件间参数通信
Vue项目中,若解构简单,父子组件之间的数据可以使用props或者$emit。
5.1 安装和配置vuex
-
npm install vuex
-
然后在main.js中引入
import Vue from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
new Vue({
el: '#app',
store,
render: h => h(App)
})
5.2 核心仓库 store.js
- Vuex应用的状态state都存放在store.js,Vue组件可以从store.js里获取状态,可以把store通俗的理解为一个全局变量的仓库。
- store中的状态发生变化时,Vue组件也会快速更新。
在src目录下创建一个vuex目录(一般在创建项目时,会一块创建),打开store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
//定义状态
state:{
author: 'Aooth Puci'
}
})
export default store
这个store.js,里只存放了一个状态author
虽然在 main.js 中已经引入了 Vue 和 Vuex,但是这里还得再引入一次。
5.3 将store状态映射到Vue组件
<template>
<footer class="footer">
<ul>
<li v-for="list in ul">{{list.li}}</li>
</ul>
<p>
Copyright © {{author}} - 2019 All rights reserved
</p>
</footer>
</template>
<script>
export default{
name: 'footerDiv',
data(){
return {
ul: [
{li: 'TooK A'},
{li: 'TooK B'},
{li: 'TooK C'},
{li: 'Took D'},
{li: 'TooK Eui'}
]
}
},
computed:{
author(){
return this.$store.state.author
}
}
}
</script>
- 注意:在
computed
中,将this.$store.author
的值返回给html
中的author
,页面渲染之后,就能获取到author
的值。
5.4 于Vue组件中修改store状态
- 例子:
- 在header.vue中修改添加一个输入框,将输入框的值传给store.js中的author
<template>
<header>
<el-input placeholder="请输入内容" v-model="inputText">
<el-button slot="append" @click="setAuthor" ></el-button>
</el-inpit>
</header>
</template>
<script>
export default {
name: '',
data(){
return{
}
},
methods:{
setAuthor: function () {
this.$store.state.author = this.inputText
}
}
}
- 解析:在 setAuthor 方法中,将输入框的值 inputTxt 赋给 Vuex 中的状态 author,从而实现子组件之间的数据传递
5.5 官方推荐的修改状态的方式
不似上5.4之修改方法,推荐如下 :
import Vue from 'Vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
author: 'Aooth Puci',
},
mutations:{
newAuthor(state, msg){
state.author = msg
}
}
})
export default store;
- 先在store.js中定义一个方法newAuthor,其中第一个参数state就是$store.state,第二个参数msg需要另外传入。
- 然后修改header.vue中的setAuthor()
methods:{
setAuthor:function(){
this.$store.commit('newAuthor', this.inputText)
}
}
下一篇Vue学习笔记「vue components 和vue项目推荐」