使用vuex进行组建间通信:
可以把vuex看作一个仓库,每一个组件都从仓库里去拿这同一个数据,一个组件的数据更改了,别的也都更改了,便于组件间信息的共享。
安装vuex指令:vue add vuex
安装完成后会发现文件列表多了一个叫store.js的文件,这个就是vuex的文件。
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //通过$store去获取到vuex中的state $store.state.name
export default new Vuex.Store({
state: {
name: 'grandmaz',
age: 22,
studentList: []
},
mutations: {
},
actions: {
}
})
可以把想要在组建间共享的变量,写在state里,Vue.use(Vuex) 会产生一个$store对象,通过$store.state.name,就能在你的组件里拿到vuex里的值。
一、state
export default {
data (){
return {
// name: this.$store.state.name //并不一起改变
name: '',
age: null
}
},
computed: {
name () {
return this.$store.state.name; //放在计算属性里,一起改变
},
age (){
return this.$store.state.age;
}
},
}
如果你直接把值赋值给你组件data里的属性,那么再去引用的时候用的还是相当于你自己在data里创建的属性值,别的组件里的值不会一起变化,但是放到计算属性里,就可以达成组件间共享数据的效果。
mapState
除了用state,还可以用mapState来获取vuex中的值,
使用方法:
先 import {mapState} from ‘vuex’; 引用mapState,mapState是一个方法,可以传一个数组为参数,也可传一个对象为参数
- 参数为数组:
mapState(['name', 'age']); //数组里放的是你在vuex的state里的属性key值,
- 参数为对象:
mapState({
storeName: state => state.name; //对象里可以是你自己定义的属性名,
//值是一个函数,参数为state,通过返回state里的值来给你自定义的属性赋值
})
使用mapState一般将他扩展放在computed计算属性里来使用:
computed: {
// ...mapState(['age']),
...mapState({
storeName: state => state.name
})
},
二、getter
getter相当于vuex的计算属性,
export default new Vuex.Store({
state: {
name: 'grandmaz',
age: 22,
studentList: []
},
getters: {
person(state) {
return `姓名:${state.name} 年龄:${state.age}`;
},
newStudentList(state){
return state.studentList.map(student => `姓名:${student.name} 年龄:${student.age}`);
}
},
mutations: {
},
actions: {
}
})
可以通过$store.getters.name来取值,
mapGetters
用法和mapState类似:
computed: {
...mapGetters({
newPerson: 'person'
})
},