Vuex在Vue中的应用-优快云博客

vuex

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

描述

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

什么是 vuex

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

为什么要用vuex

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

兄弟组件之间传值

定义中间实例vm进行传值，逻辑过于复杂

父子组件之间传值

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

引入vuex

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

Vuex是什么？

vuex安装和使用

安装

1	npm i vuex -S

导入包到文件

1	import Vuex from 'vuex'

1	Vue.use(Vuex)

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

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

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

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

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

例子

项目演示地址

https://github.com/ForeManWang/vuex-study

可以先去这里下载项目下来，跟着例子操作

创建基本项目结构和搭建vue环境和配置，不多赘述了

vuex项目结构

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

npm i

state

这里就是相当于第六步，去components/amount.vue

去访问 vuex 实例中的数据

如何访问vuex数据

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

moutations 操作数据

加法需求

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

1	<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方法

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

在main.js的moutations中定义

1
2
3

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

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

去components/counter.vue中调用，需要传参

1
2

这样减法就实现了，实现一次性减obj.c + obj.d

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 的重新求值

总结

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