vuex

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

1 描述

本文档对于有一定vue项目环境搭建和配置的相关经验的人会更轻松的理解

2 什么是 vuex

vuex 是 Vue 配套的公共管理数据工具，他可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或者修改公共数据

3 为什么要用vuex

下面原始的传值和vuex的区别与优缺点

3.1 兄弟组件之间传值

通过eventBus事件车，emit传值

3.2 父子组件之间传值

子向父传值，通过事件调用机制，父给子传值通过属性绑定，但如果嵌套过深的传值，难免会产生复杂的逻辑

3.3 引入vuex

vuex相当于是项目共享数据仓库，全局共享数据存储区域，方便各个组件直接拿来使用，这样就少了很多复杂的逻辑

4 vuex安装和使用

1. 安装

npm i vuex -S

2. 导入包到文件

import Vuex from 'vuex'

3. 注册

Vue.use(Vuex)

4. 实例化，得到一个数据仓储对象

var store = new Vuex.store({
    state: {
        // 可以把 state 对比 vue 组件中的 data ，专门用来存储数据
        count: 0
    },
    mutations: {
        
    },
    getters: {
        
    }
})

5. 将 vuex 创建的实例对象挂载到 vm 实例上

const vm = new Vue({
  ...
  // store: store 
  store
})

6. 在需要共享数据的组件中想要去访问 vuex 实例中的数据，需要通过this.$store.count来访问

4.1 例子

4.1.1 项目演示地址

https://github.com/ForeManWang/vuex-study
可以先去这里下载项目下来，跟着例子操作
创建基本项目结构和搭建vue环境和配置，不多赘述了

下载下来项目之后，在根目录自行安装所有依赖插件

npm i

4.1.2 state

这里就是相当于第六步，去components/amount.vue
去访问 vuex 实例中的数据

这时候打开后台，打开页面刷新，发现就已经能够访问 vuex 中的数据了

4.1.3 moutations 操作数据

加法需求

去components/counter.vue的methods中写了一个add方法

    <input type="button" value="增加" @click="add">

    add() {
      // 千万不要这么用，不符合 vuex 的设计理念
      // 这种操作数据的方法相当于是自己的组件操作数据，假如数据紊乱，会不知道是谁操作的数据导致了数据紊乱，所以不利于后期维护
      // 所以将需求告诉一个 <库管员> 让 <库管员> 去操作
      // 这里就是要 vuex 仓库中的 mutations 提供的方法去操作对应的数据，这样假如维护中出现数据紊乱的情况，可以快速定位错误的原因，利于后期维护
       this.$store.state.count++;  
    },

注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit(‘方法名’)
所以在components/counter.vue内部就这样调用

    add() {
      // 千万不要这么用，不符合 vuex 的设计理念
      // this.$store.state.count++;
      this.$store.commit("increment");
    },

减法需求

去components/counter.vue的methods中写了一个remove方法

<input type="button" value="减少" @click="remove">

在main.js的moutations中定义

    subtract(state, obj) {
      state.count -= (obj.c + obj.d)
    }

注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过 commit 提交过来的参数；

去components/counter.vue中调用，需要传参
这样减法就实现了，实现一次性减obj.c + obj.d

4.1.4 getters 包装数据

这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations

main.js

  getters: {
    optCount: function (state) {
      return '当前最新的count值是: ' + state.count
    }
  }

counter.vue

  computed:{
    fullname: {
      get(){},
      set(){}
    }
  }

经过回顾对比，发现 getters 中的方法， 和组件中的过滤器比较类似，因为过滤器和 getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了 调用者；
其次， getters 也和 computed 比较像， 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值

5 总结

1. state中的数据，不能直接修改，如果想要修改，必须通过mutations
2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.***
3. 如果 组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称'， 唯一的一个参数)
4. 如果 store 中 state 上的数据， 在对外提供的时候，需要做一层包装，那么 ，推荐使用getters, 如果需要使用 getters ,则用this.$store.getters.***