VUEX(状态管理)

ShaLiWa 2020-05-25

1.导入vuex包

import vuex from ‘vuex’

2.注册vuex到vue中

vue.use(vuex)

3.new vuex.store() 得到一个数据存储对象

var store = new vuex.store()

4.将new出来的store对象挂载到vue上

一,state 存放一些公共的数据

state: { 

?    count: 0

?    }

两种方式访问state中的数据

1. this.$store.state.属性名

2.  从vuex中导入 mapState 函数    将全局数据映射为当前组件的计算属性

import { mapState } from ‘vuex‘
?    computed: {
?        ...mapState ([‘count‘])
?    }

拿到了state中的数据,不能直接修改(操作)数据,要通过触发mutation里的方法

一,mutation用来改变state里数据的唯一属性

1. 触发mutation里的方法

VUEX(状态管理)

 VUEX(状态管理)

 2. 触发mutation里的方法

VUEX(状态管理)

VUEX(状态管理)

 三,action用于异步处理任务

VUEX(状态管理)

 VUEX(状态管理)

 四,getter(相当于计算属性,方法里直接用return),访问两种方式

VUEX(状态管理)

 VUEX(状态管理)

 VUEX(状态管理)

相关推荐