vuex是干嘛的
Vuex是用来进行公共数据方法管理的。即管理所有数据都能拿到的数据和方法
vuex的核心
-
state
用于存储公共状态,也就是数据,可以理解为组件中的data,以对象的格式写入即可
state: {counter: 10}在任何组件中都可以用
$store.state.counter
来获取。但是尤大大只建议用此方法来获取,如果要想更改数据则必须通过mutations来进行操作,因为这样可以配合devtools插件来监听数据变化来自那个方法,利于排错
-
mutations
- Mutation方法介绍: 用于存储公共方法,可以理解为组件中的methods,如果想要获取state里面的数据则只需在方法里面传个state参数即可实现,并通过
state.counter
直接调用即可 - Mutation方法使用: 一般都是先在组件中执行一个methods方法,然后在方法中再提交调用公共方法。
this.$store.commit('方法名')//不需要加括号
- Mutation方法传参:mutations里的方法允许提交时被传参,
this.$store.commi('addstus',stu)//stu便是参数
,之后直接在mutations方法形参中加入这个stu即可,这个参数被称为是mutation的载荷(Payload) - Mutation的提交风格:上面通过commit进行提交是一种普通的方式,还有第二种提交方式,包含type属性的对象,type中填写提交的方法名,下面则是写要传的值这种处理方式是将commit作为对象传过去,所以可将palyload作为对象传过去然后调用键名即可
- Mutation的响应规则: 如果我们想要公共状态的更新是响应式的就必须遵守一些规则
- 只能修改已经在store初始化好的属性,因为响应式的原理是将存在的数据放在响应式库中
- 给state中的数组添加新数据时要用push方法
state.stus.push(palyload.stu)
- 或者赋值一个新的对象
- 给state中的数组更改数据时只能用Vue.set方法
Vue.set(state.stus,0,'老铁我好像变了')
- 删除state中数组的数据则推荐用delete或者Vue.delete
Vue.delete( state.stus[0])
- Mutation命名抽取: 如果方法太多可以用常量代替方法名
做法: 在store文件夹中创建mutation-types.js文件,然后在里面定义其中的常量
export counst STUS = 'stus'
然后在使用的地方以对象的方式引入
- Mutation方法介绍: 用于存储公共方法,可以理解为组件中的methods,如果想要获取state里面的数据则只需在方法里面传个state参数即可实现,并通过
-
getters
- 用于存储计算方法,相当于组件中的计算属性写入格式也是一样,并且也可以传state参数
- 和平常计算属性一样,也需要return出去,引用的时侯通过
$store.getters.方法名//不需要单独加引号括号
- getters中的方法还可以传入getters属性,并且可以直接在方法中调用使用`return getters.方法名.length
-
Action
- Action是专门用来触发异步操作的,尤大大强调过异步操作绝对不可以在Mutations中使用,因为这样devtools是检测不到数据变化的,难以调试。
- Action的用法: 用法跟Mutation大体一致,但函数中参入的是context:跟store具有相同方法和属性的对象。我们可以用它去做提交操作,也可以获取context.state。
- 使用Action时,应该是先通过dispatch调用action的方法
this.$store.dispatch('increment')
这里dispatch中出方法外只能再传一个参数,如果想传多个值的话可以把一个对象传过去。在Action执行完后若想继续执行方法可在action方法中调用mutation方法
-
module
- Module是为了避免状态太多难以维护而出现的,可以理解为模块化
- 首先定义一个对象在里面放四个核心属性,module除外,然后在modules里面注册: a:moduleA,一个模块的基本结构就写好了。
- state:用法一样,只不过在编译时会默认把模块加入state中,
this.$store.state.a
即可获取a模块的状态 - mutations: 用法完全一样,不过要注意重名问题,参数是(state,值...)
- getters: 用法依然一样,也要注意重名问题,参数分别是(state,getters,rootState)
- actions: 用法一样也是dispatch来调用,默认的参数是(context,值)context里面有commit,dispathc,getters,rootGetters,rootState,state这些参数,带root的是根的属性
devtools插件d
- Vue官方发布的一个浏览器插件,用来监听Vue数据的变化等,也可以监听数据变化来自那个方法
其他
- 对象解构: 如果想把对象中的属性拿出来使用可以用ES6语法中的对象解构
const obj = {name: 'why',age:18}
此时还不能单独使用,const {name,age} = obj 这样就可以单独使用了