Vuex入门到上手教程

人气：437 时间：2019-04-11

这篇文章主要为大家详细介绍了Vuex入门到上手教程，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

一、前言

当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃，特别是非父子组件之间通信。此时就应该使用vuex，轻松可以搞定组件间通信问题。

【图片暂缺】

二、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。

三、什么时候使用Vuex

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您的应用够简单，您最好不要使用 Vuex,因为使用 Vuex 可能是繁琐冗余的。一个简单的global event bus就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

四、Vuex安装(限定开发环境为 vue-cli)

首先要安装vue-cli脚手架，对于大陆用户，建议将npm的注册表源设置为国内的镜像(淘宝镜像），可以大幅提升安装速度。

代码如下：



npm config set registry https://[registry.npm.taobao.org](http://registry.npm.taobao.org/)
npm config get registry//配置后可通过下面方式来验证是否成功
npm install -g cnpm --registry=[https://registry](https://registry/).npm.taobao.org
//cnpm安装脚手架
cnpm install -g vue-cli
vue init webpack my-vue
cd my-vue
cnpm install
cnpm run dev

脚手架安装好后，再安装vuex

代码如下：



cnpm install vuex --save

五、如何使用Vuex

1.如何通过Vuex来实现如下效果？

【图片暂缺】

①创建一个store.js文件

代码如下：



import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
 state: { //这里的state必须是JSON，是一个对象
 count: 1 //这是初始值
 },
 mutations: {//突变，罗列所有可能改变state的方法
 add(state) {
  state.count++; //直接改变了state中的值，而并不是返回了一个新的state
 },
 reduce(state){
  state.count--;
 }
 }
});
export default store;//用export default 封装代码，让外部可以引用

②在main.js文件中引入store.js文件

代码如下：



import store from "./vuex/store"
new Vue({
 router,
 store,
 el: '#app',
 render: h => h(App)
})

③新建一个模板count.vue

代码如下：



<template>
 <div>
  <h2>{{msg}}</h2><hr/>
  <h2>{{$store.state.count}}-{{count}}</h2>//这两种写法都可以
  <button @click="addNumber">+</button>
  <button @click="reduceNumber">-</button>
 </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
 data() {
 return {
  msg: "Hello Vuex"
 };
 },
 methods: {
 addNumber() {
  return this.$store.commit("add");
 },
 reduceNumber() {
  return this.$store.commit("reduce");
 }
 },
 computed: mapState(['count'])// 映射 this.count 到 this.$store.state.count
         mapState 函数可以接受一个对象，也可以接收一个数组
};
</script>

由于 store 中的状态是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。改变store 中的状态的唯一途径就是显式地提交 (commit) mutations。

这样，我们就可以实现自增1或是自减1，那假如我们想要点击一次实现自增2，这该如何实现，也就是如何向Mutations传值？

2.如何在Mutations里传递参数

先store.js文件里给add方法加上一个参数n

代码如下：



mutations: {
 add(state,n) {
  state.count+=n;
 },
 reduce(state){
  state.count--;
 }
 }

然后在Count.vue里修改按钮的commit( )方法传递的参数

代码如下：



addNumber() {
  return this.$store.commit("add",2);
 },
 reduceNumber() {
  return this.$store.commit("reduce");
 }

3.getters如何实现计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

例如：要对store.js文件中的count进行操作，在它输出前，给它加上100。

首先要在store.js里Vuex.Store()里引入getters

代码如下：



getters:{
  count:state=>state.count+=100
 }

然后在Count.vue中对computed进行配置，在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要用展开运算符”…”对上节写的computed属性进行一个改造。

代码如下：



computed: {
 ...mapState(["count"]),
 count() {
  return this.$store.getters.count;
 }
 }

需要注意的是，此时如果点击'+'，就会增加102，如果点击'-',就会增加99，最后的结果是mutations和getters共同作用的。

4.actions如何实现异步修改状态

actions和上面的Mutations功能基本一样，不同点是， actions是异步的改变state状态，而Mutations是同步改变状态。

①在store.js中声明actions

代码如下：



actions: {
 addAction(context) {
  context.commit('add', 2);//一开始执行add,并传递参数2
  setTimeout(() => {
  context.commit('reduce')
  }, 2000);//两秒后会执行reduce
  console.log('我比reduce提前执行');
 },
 reduceAction({
  commit
 }) {
  commit('reduce')
 }
 }

actions是可以调用Mutations里的方法的,调用add和reduce两个方法。在addAction里使用setTimeOut进行延迟执行。在actions里写了两个方法addAction和reduceAction，两个方法传递的参数也不一样。

context：上下文对象，这里你可以理解称store本身。 {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了

②模板中的使用

代码如下：



<p>
 <button @click="addNumber">+</button>
 <button @click="reduceNumber">-</button>
</p>
<p>  
 <button @click="addAction">+</button>//新增
 <button @click="reduceAction">-</button>//新增
</p>

代码如下：



import { mapState, mapGetters, mapActions } from "vuex";
methods:{
 ...mapMutations([ 
  'add','reduce'
 ]),
 ...mapActions(['addAction','reduceAction'])
}

最后得到如下效果：点击addAction按钮事件时，先累加2，两秒后再减去1，而addNumber事件则不能实现异步效果。

【图片暂缺】

ps:如果想访问源代码，请猛戳 git地址。如果觉得对您有用，请给本文的github加个star,万分感谢

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5368-0.html

注：关于Vuex入门到上手教程的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：浅析Vue 生命周期

下一篇：分析基于vue的服务端渲染框架NUXT