vuex快速入门

vuex是什么?

  vuex是一个专门为vue.js应用程序开发的状态管理模式。

vuex默认的五种基本的对象:

  state:存储状态(可以理解为变量)可以从计算属性中返回某个状态

  getters:通常用在数据的二次处理(过滤数据...),可以理解为state的计算属性

  mutations:修改状态,并且是同步的。

  actions:异步操作。

  modules: Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter 用法其实和上面是一样的。

vuex的安装:

  使用命令行工具输入 npm install vuex --save

安装完成之后 第一步:创建vuex文件夹,在vuex文件夹里面创建一个名为store.js的文件

 第二步:在store.js文件里面导入vue和vuex (注意变量名是大写Vue和Vuex)

  import Vue from 'vue'
  import Vuex from 'vuex'

 

然后可以通过两种方法暴露方法

  方法一:(常用,在对象里面方法很多的情况下这样的写法也是最方便管理的)

  方法二:(也有部分人直接在输出里面写,两个方法最终结果都一样,只是第一种方法更加方便管理)

 

第三步:在main.js中引入store.js

 

接下来我们在一个页面中去使用:如

说明:$store为Vuex的文件名,state为对象名,count为对象的方法名(其他一样)

 

这样就能在页面上显示了:

说明使用成功。

  现在我们已经正常使用了vuex中的state,接下来我们 操作这个值 就要用到 mutations 和 actions 了

  首先是mutations 

在store.js文件中定义mutations对象,设置参数,第一个默认为state,接下来的为自定义参数。

然后在mutations中定义两个方法,增加和减少,并且设置一个参数n,默认值为0

 

接下来在页面上使用这个方法:(要注意,在父子组件中才有效果,因为commit方法就是vue里面给父子组件用的)

这样就可以在页面上进行操作这个值了

    默认显示的值

     点击一次增加后的值

     

     重置为默认值之后点击一次减少之后的值

      

  接下来就是actions,actions是异步操作

  在store.js文件中定义mutations对象这里我在两个方法中使用了两个不同的参数,一个是context,它是一个和store对象具有相同对象属性的参数。在第二个函数中,使用了commit

  要注意这两种方法的写法区别

  

然后在页面中写入如下内容:(为了和上面的操作有区别,传递参数设置为10作为区分。)

   

效果图:(不再一一列举)

接下来是是getters,getters算是非常简单的了。

 我们一般使用getters来获取我们的state,因为它算是state的一个计算属性、

还是在store.js文件中定义,

 

然后在页面中使用:

 

结果:

 到这里,vuex基础知识就差不多了,欢迎指点错误。

原文地址:https://www.cnblogs.com/hermit-gyqy/p/11270315.html