vuex详细介绍和使用方法

1.什么是vuex？

官方的解释： Vuex是一个专为Vue.js应用程序开发的状态管理模式

当项目比较庞大的时候，每一个组件的状态比较多，为了方便管理，须要把组件中的状态抽取出来，放入Vuex中进行统一管理。经常使用的登陆，购物车等一下数据的存储

 

 

State：惟一的数据源，咱们须要把任何一个组件中须要抽取出来的变量放入到state中去

Getters：经过Getters能够派生出一些新的状态

Mutations：更改Vuex的store中的状态的惟一方法时提交mutation

Actions：Action提交的是mutation，而不是直接变动状态。Action能够包含任何的异步操做, 但mutation必须是同步操做。

操做步骤： 当组件中的状态发生改变，经过dispatch函数提交到Action，Actions再经过Commit函数提交到Mutations, 此时，状态发生改变都会实时的去渲染组件。

在线文档：

https://github.com/vuejs/vuex

https://vuex.vuejs.org/zh/

项目中如何使用vuex

在咱们的项目中，安装vuex

cnpm install vuex --save

在src目录中，建立store文件，并建立vuex中模块的文件名，每个都单独拆分开，便于管理模块。

而后在你的main.js文件引入

在你的index.js至关于vuex的主目录，文件都在index.js文件引入

state文件定义全部的状态，

 

mutation-types用于定义action和mutation变量，便于统一管理，

定义的状态能够在浏览器看到咱们定义的变量

 

action 提交的是 mutation，而不是直接变动状态。

 

mutation提交更改state的惟一的状态

 

 getters派发state的状态值，经过计算属性获取值。在任何一个组件均可以或获取到你在state存储的数据信息

 在组件中使用。setUser就是在action定义的提交mutation的放，decode要提交的数据

this.$store.dispatch("setUser", decode);

　　

只要写好一个，其余的套路都是同样的，主要的就是action提交大mutations，而后mutations去更改state里面的状态。