vuex入门

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

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

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

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

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

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

main.js中引入并注册

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

组件B

效果如下

 

模块化的使用：

这样用就可以啦：

显示为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