vuex概念和作用

  • vuex是做什么的？
    • Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用了集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • 状态管理到底是什么？
    • 状态：目前可以理解为就是变量
    • 状态管理模式，集中式存储管理这些名词听起来非常高大上，让人捉摸不透
    • 其中可以将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他的组件可以使用，那么，多个组件就可以共享这个对象中的所有属性了
    • 如果一个状态有多个组件都需要使用，我们使用组件间传值的方式就会特别麻烦，所以就需要一个大管家（Vuex）来帮我们统一管理，这样谁需要就让大管家分配给它就行。
    • 且Vuex中管理的数据都是响应式的，所有用到的地方都会同时改变
  • 那么什么情况下我们会用到Vuex来管理我们的状态呢？
    • 用户的登录状态，用户名称，头像，地理位置等
    • 商品的收藏，购物车中的物品等，这些我们都可以放在统一的地方来保存和管理
    • 例子：我们会用到token（令牌）这个东西，它是登录成功之后，服务器返回给我们的一串字符串，我们用户去服务器请求数据时，有的数据是必须要登录状态的用户才可以拿到，所以当用户登录后，要携带这个token去服务器拿数据，由于我们可能在很多地方都要该数据，这样就可以把这个token保存在Vuex中，当任何组件需要时去拿就可以了
    • 当然不是随便一个状态都是放在Vuex中进行管理，当我们的状态是多个组件需要共享，而且层级关系比较复杂的时候，就是Vuex的用武之地，其余时候用组件间传值就行了

单页面到多页面状态管理切换

  • 单页面状态管理

flow.png

state就是一些状态，用一些变量来保存，它指向了View，因为页面可以通过{{ message }} 来引用这些状态来显示在页面上，而View中又可以产生一些行为，比如用户的点击事件，这些 行为（actions） 又会反过来改变我们的状态State

  • 多页面状态管理

vuex.png

  1. 多个页面都以来同一个状态（一个状态改变，多个页面更新）2. 不同页面的 actions（行为）都想要修改这个同一个状态 我们看上图，vue组件可以引用State中的状态，注意这个箭头是单向的，说明不应该直接在组件中对Vuex中的状态进行修改，而是要先dispatch（发送）到actions（行为），然后commit（提交）到Mutations（），再Mutate到state，然后再render（渲染）到这个组件内部 而且vue官方为我们提供了一个插件，叫做devtools，这个插件是用来记录每一次我们到底是哪一个组件修改了我们的state的，如果我们在组件中直接修改state的值，那如果出错了就定位不到问题在哪里。
  • 在使用Vuex时，我们需要创建一个全新的文件夹叫 store（仓库） ，之后创建index.js ```javascript 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

  2. - 然后在 main.js 中导入 'import store from './store'，然后在main.js中的new Vue中写上.store，其实这一步内部的实现方式就是在main.js中`Vue.prototype.$store = store`，把store放在了原型对象中，然后在多个组件中就可以$store来使用store中的东西了
  3. - 使用方法：<h2>{{$store.state.counter}}</h2>，先拿到$store下面的state，再拿到其中的counter
  4. - 但是如何想要修改这个Vuex中的状态的话，必须按照一定的套路来做
  6. <a name="B7c30"></a>
  7. ## devtools 和 mutations
  9. - 以后我们如果要修改vuex中的数据，就应该在mutations中进行修改，具体使用步骤如下：首先在store的index.js中的mutations中定义两个方法 increment 和 decrement
  10. ```javascript
  11. const store = new Vuex.store({
  12.     state: {
  13.       counter: 1000
  14.   },
  15.   mutations: {
  16.       increment (state) {
  17.         state.counter++
  18.     },
  19.     decrement (state) {
  20.         state.counter--
  21.     }
  22.   }
  23. })
  • 然后我们如何在组件中调用这两个方法呢？在.vue 组件中声明两个方法addition/substruction，并使用this.$store.commit('increment')来提交mutations中的两个方法。
    1. methods: {
    2.   additions () {
    3.     this.$store.commit('increment')
    4. },
    5. subctruction () {
    6.     this.$store.commit('decrement')
    7. }
    8. }

Vuex-state 单一状态树的理解

  • Vuex有以下几个核心的概念
    • State（保存共享状态的地方）
    • Getters（类似于组件中的计算属性computed）
    • Mutations（用来修改State中的状态）
    • Action（做一些异步操作）
    • Module（专门用来划分模块的）
  • Vuex提出使用单一状态树，什么是单一状态树呢？
    • 英文名称Single Source of Truth ,直接翻译过来就是：单一数据源
    • 生活中的例子：我们每个人的信息会被记录，比如上学时的个人档案，社保记录，公积金记录，户口，医疗，文凭等，这些信息被放在不同的系统中进行保存，比如社保局，人力资源局等等，分开管理有什么好处呢？就是可以保证信息的安全性，如果一个系统被入侵了，那么泄漏的只是一个信息，而不是一个人的所有信息。但是也有缺点，就是我们如果要入户到某一个城市，就需要个人去很多地方来打印很多的信息，盖章等等，很麻烦，这种保存信息的方式，不仅仅低效，而且不方便管理，日后的维护也是一个庞大的工作
    • 如果我们要管理多个状态，这些状态可以划分为不同的类别，每个类别其实都是可以创建一个store对象的，但是Vuex要求我们只创建一个store对象，方便管理和维护

Vuex-Getters的使用详解

  • getters类似于computed属性，是对数据进行一些处理后再进行展示，在这里，getters就是对我们 state 中的状态进行进一步的加工，在getters中添加方法

    1. const store = new Vuex.store ({
    2.   state: {
    3.     counter: 100
    4. },
    5. getters: {
    6.     powerCounter (state) {
    7.       return state.counter * state.counter
    8.   }
    9. }
    10. })

  • 在组件中使用时

    1. <h2>{{$store.getters.powerCounter}}</h2>

  • getters内部的方法，可以传入getters本身，相当于getters内部的一个方法，可以调用它的兄弟方法。

    1. getters: {
    2.   foo1 (state) {
    3.     return state.a * 10
    4. },
    5. foo2 (state, getters) {
    6.     return getters.foo1 * 20
    7. }
    8. }

  • 如果getters中的方法可以还需要传递除了state/getters以外的参数，也就是自定义的参数的话，就需要让这个getter返回一个函数，这个函数可以传递自定义的参数，当我们使用$store.getters.foo3时，其实这里是一个函数，这时就可以传递参数了$store.getters.foo3(2,3)

    1. getters: {
    2.   foo3 (state) {
    3.     return function (a,b) {
    4.       console.log(a + b)
    5.   }
    6. }
    7. }

Vuex-Mutations使用详解

  • Vuex的store状态更新的唯一方式就是：提交mutations
  • mutations主要包括两部分：
    • 字符串的事件类型（type），就是就是该方法的名称，如：increment
    • 一个回调函数（handler），该回调函数的第一个参数就是state