vue周边技术都是官方提供的,不用担心选型

vuex是为vue.js开发的状态管理模式

为什么需要vuex?应用场景有哪些?

系统的运行是单向的,数据驱动视图,用户在视图进行操作,触发action,然后更改state。想要让一份数据在多个组件中使用,并且在一个里面修改,别的地方也要同步的修改。通过组件层层传递的方式,付出的代价是比较高的。我们需要一个系统化的状态管理工具。

vuex是不再与组件强相关的了,vuex可以独立的提供响应式数据,vuex提供数据state,提交给视图,视图通过action,进行异步操作,commit提交给mutations,再更改state数据。(没有异步操作可以跳过action)

首先我们新建一个store的文件夹,新建一个store.js的文件,这是我们提供状态管理的作用的地方。

vuex入门

main.js中引入并注册

vuex入门

state:提供一个响应式数据,通过this.$store.state.xxx进行取值

mutation:更改state的方法,通过this.$store.commit('xxx')赋值

getter:类似与计算属性,通过this.$store.getters.xxx取值

action:触发mutation方法,通过this.$store.dispatch('xxx')来赋值

modules:项目复杂时,可以让每一个模块拥有自己的state、mutation、action,方便管理

组件A

vuex入门

组件B

vuex入门

效果如下

vuex入门

 

模块化的使用:

vuex入门

这样用就可以啦:

vuex入门显示为0 1

state 是被限制到模块的命名空间下,需要命名空间才能访问。 但actions 和mutations, 其实还有 getters 却没有被限制,在默认情况下,它们是注册到全局命名空间下的,所谓的注册到全局命名空间下,其实就是我们访问它们的方式和原来没有module 的时候是一样的。比如没有module 的时候,this.$store.dispatch(“actions”), 现在有了modules, actions 也写在了module 下面,我们仍然可以这么写,this.$store.dispatch(“changeName”)。

另小知识点:

在vuex中的mutations方法,想调用mutations中的另外一方法,还是用commit,只需要使用this.commit('function'),当前的this指向的就是当前模块中的mutations;

在指令中用到的时候,不用加this

vuex入门

相关文章: