zoukankan      html  css  js  c++  java
  • 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基础知识就差不多了,欢迎指点错误。

  • 相关阅读:
    python 复制文件并重命名,copy多份规律文件
    抓取“维库电子市场”供应商程序
    css 去除按钮、链接中的虚线框
    jQuery 隐藏和显示 input 默认值
    Ps画虚线
    jQuery 表格展开伸缩
    抓取“华强电子网”供应商程序
    jquery两边飘浮的对联广告
    jQuery 验证表单
    用ps调渐变色 实用推荐
  • 原文地址:https://www.cnblogs.com/hermit-gyqy/p/11270315.html
Copyright © 2011-2022 走看看