Vue学习笔记（八）

Vuex部分

（一）Vuex作用：存储组件共享的数据

1.集中管理共享数据，易于开发和后期维护

2.能够高效实现组件之间的数据共享，提高开发效率

3.存储的数据是响应式的，能够保持数据与页面的同步

（一）Vuex核心概念

1.State

访问：

（1）store.js中操作

import { createStore } from "vuex";

export default createStore({

//声明state: { }

    getters,

    modules,

});

（2）组件访问：

方法1：this.$store.state.属性名（template里面this省略）

方法2：组件中 import {mapState} from 'vuex' 将当前组件需要的全局数据映射为当前组件的computed计算属性：

computed: {

...mapState(["属性名"])//...是展开运算符

}

2.Mutation: 变更Store里面的数据

（1）好处：可以集中监控数据变化

（2）定义：

import { createStore } from "vuex";

export default createStore({

//声明state: { }

//声明mutations: {定义方法，参数是state，变更state的属性}

    modules,

});

（3）触发：

①this.$store.commit("方法名称")

②import {mapMutations} from 'vuex' ，将需要的mutation函数映射为methods方法

methods: {

...mapMutations(["属性名"])//...是展开运算符

//然后在具体的函数中this.属性名调用

}

（4）触发mutation时传递参数：定义时放在传参的第二参数，第一个一定是state；触发的时候this.$store.commit("方法名称", 参数)

不要再mutations函数中执行异步操作（定时器之类的）

3.Action：处理异步任务，但是要在action中触发 mutation来变更数据

（1）定义action

import { createStore } from "vuex";

export default createStore({

//声明state: { }

//声明mutations: {定义方法，参数是state，变更state的属性}

 //声明actions: {

//方法名建议是mutation方法+Async

方法名(context){

setTimeout( ()=>{context.commit(mutation方法名)},时间间隔)

}

}

});

（2）触发action

①在组件methods中使用this.$store.dispatch(action方法)

②import {mapActions} from 'vuex' ，将需要的mutation函数映射为methods方法

methods: {

...mapActions(["方法名"])//...是展开运算符

//然后在具体的函数中this.方法名调用

}

（3）携带参数（跟mutation一样，然后调用mutation方法时也要传进去）

2.Getter:

对Store数据加工处理成新的数据，不修改store数据，类似计算属性，store数据变化getter也会变

（1）声明Getter

import { createStore } from "vuex";

export default createStore({

//声明state: { }

//声明mutations: {}

 //声明actions: {}

//声明getters{

方法名(state){

//处理语句

return 要返回的东西

}

}

});

（2）使用getters

①this.$store.getters.方法名

②import {mapGetters} from 'vuex' ，将需要的mutation函数映射为computed计算属性

computed: {

...mapGetters(["方法名"])//...是展开运算符

//然后在具体的函数中this.方法名调用

}