Vuex详解

目录

Vuex 是什么？

        组件之间的传值有哪些？有父子通讯，兄弟组件通讯......但是传参对于多层嵌套就显得非常繁琐，代码维护也会非常麻烦。因此vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。

什么时候我们该使用它？

安装方式Yarn、npm或自己构建

五个变量解释

vuex中store存储

store.commit和store.dispatch的区别及用法

---

Vuex 是什么？

官网解释：

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

        组件之间的传值有哪些？有父子通讯，兄弟组件通讯......但是传参对于多层嵌套就显得非常繁琐，代码维护也会非常麻烦。因此vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。

什么时候我们该使用它？

答案是：需要共享状态或数据的时候。

安装方式Yarn、npm或自己构建

 使用NPM命令

npm install vuex@next --save

使用Yarn命令

yarn add vuex@next --save

自己构建

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
yarn
yarn build

五个变量解释

     1、 state  

        提供唯一的公共数据源，有共享的数据统一放到store的state进行储存，相似与data。

 在vuex中state中定义数据，可以在任何组件中进行调用。

     2、getter

     类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

   

3、Mutation

   更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

4、Action 

        Action和Mutation相似，一般不用Mutation 异步操作，若要进行异步操作，使用Action

原因：为了方便devtools打个快照存下来，方便管理维护。所以说这个只是规范，而不是逻辑的不允许，只是为了让这个工具能够追踪数据变化而已

5、Modules

        当遇见大型项目时，数据量大，store就会显得很臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

vuex中store存储

store.commit和store.dispatch的区别及用法

// 以载荷形式
store.commit('increment'，{
  amount: 10   //这是额外的参数
})

// 或者使用对象风格的提交方式
store.commit({
  type: 'increment',
  amount: 10   //这是额外的参数
})

主要区别：

1、dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据

        写法示例： this.$store.dispatch('isLogin', true);

2、commit：同步操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里

      写法示例： this.$store.commit('loginStatus', 1);

两者都可以以载荷形式或者对象风格的方式进行提交