vuejs学习与总结——vuex

vuex概述

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

状态管理

• 我们可以将其简单的看成把需要多个组件共享的变量全部存储到一个对象里，然后将这个对象放在顶层的vue实例里，让其他组件可任意使用。
• 当然可能会有疑问，为什么官方还给我们定义了一个组件呢?我们自己也可以自定义组件呀.原因在于：我们自己定义的组件不能保证其所具有响应式。

应用场景

在一些状态下我们需要组件间共享，比如：

• 用户的登录状态、用户名称、头像、地理位置等
• 商品的收藏、购物车中的物品等
  以上这些信息我们都可以放在统一地方，对他进行保持，而且他们还是响应式的。

单界面的状态管理

其实我们都知道，单界面的状态管理确实比较简单。

• state:状态
• view：视图层，可以针对state的变化，显示不同的信息
• actions：主要是用户的各种操作：点击，输入等

多界面的状态管理

在vue中，我们已经知道了单界面的状态管理，但是针对于多界面呢：

• 多个视图都依赖一个状态，（一个状态被更改，多个界面需要进行更新)
• 不同界面的action都想修改同一个状态，也即是说，对于某些状态属于我们的某一个视图，但是也有一些状态是我们其他视图也想要共同维护的。
• 对于以上这些情况，vuex就是帮助我们实现以上操作的工具

vuex背后的思想

将共享的状态抽取出来，交给我们的大管家，统一进行管理
之后的每一个视图，都按照大管家规定好的准则进行访问和修改。

vuex状态管理模式图

vuex的使用过程

虽然vuecli给我们提供了便捷的vuex,当我们创建项目时，会自动给我们生成相应的文件，但是为了更加清楚的了解vue x的使用过程，决定自己梳理一遍。

具体步骤

• 安装vuex
  
  再次，我们需要静待其安装
• 创建一个文件夹，用于书写我们的vuex
  
• 接下来，就是需要安装、导入、以及导出了

import Vue from'vue'

import  Vuex from 'vuex'

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.Store({
  state:{
 
  },
  mutations:{

  },
  actions:{

  },
  getters:{

  },
  modules:{

  }
})

//3.导出store对象
export  default store

• 创建好组件后，我们需要在我们的main.js里面引用它。
• 
• 
  举个例子：
  在我们的不同的组件里面我们需要访问共同的内容，即counter:0
  
  我们便可以将他们所需要访问的counter放到我们的vuex中：
  
  当我们的app.vue和hellovue想要访问我们的countwer时，这时我们便可以通过=={$store.state.counter}}==进行访问
  

小结

在以上关于vuex的学习中，初步了解了vuex,j接下来会对其进一步的学习。
关与学习这件事情，不仅要学，更要学会总结，我写博客的目的多半出于此。一方面，学习之后总结一下，巩固知识；另一方面，方便自己在以后的时候回顾。如果我的总结能够给您帮助，那将是我的荣幸。