vuex的相关了解(初学者)

  • Post author:
  • Post category:vue





1.vuex是什么?



简而言之vuex就是一种

状态管理模式





2.又为什么要使用这种管理呢?



是为了集中管理所有组件的状态,保证状态可预测的发生变化。

简单的数据不要用vuex,复杂的数据才用



3.vue的工作流程




vue 组件 ->  Dispatch 派发 -> action  -> commit 提交 -> mutation -> change 修改 -> state -> render 渲染 -> vue组件



4.使用流程:

(1)先在state



初始

数据

,想要

修改

state里边存放的数据,

不能直接修改state

,首先得在actions(它是方法)->mutations->state里边修改

state: {


count:0  // 初始数据

}

(2)actions:里边的方法自带一个{commit}—记住,直接那样写就可以

这里边的行为

不做处理

,只提交给mutations

e.g:

actions: {


add ({commit}) {


commit(‘mutations里边的函数方法一致’)

}

}

(3) mutations:也是方法,里边的函数名

必须

跟actions里边提交的名字要相同,内部自带一个参数,state,方便去改变下属的属性

e.g:

mutations: {


actions里边提交的名字一致 (state) {


state.count++

}

}

(4)还会添加一个:


getters


,为了更安全,其中方法名,需要和state里边初始化数据名一致(切记记住,其实也没啥用,但是需要这样写,就是体验感更好),它相当于一个


计算属性



getters: {


count(state) {


return state.count // 返回count的值

}

}

(5)想要在哪儿使用vuex,就在哪儿引用它,

获取数据:引用:

import { mapGetters } from ‘vuex’

花括号里边想要获取哪个就引用哪个

又怎么用呢?或括号内部引用的值

它相当于一个计算属性,下边这样定义:


computed:mapGetters([count])


如果要引用

多个

,就要使用



,es6新语法,比如:

computed:{



…mapGetters([count])


}



版权声明:本文为weixin_49176621原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。