VueX安装及使用基础教程

目录
  • 1、安装vuex依赖包
  • 2、导入vuex包
  • 3、创建 store 对象
  • 4、将 store 对象挂载到vue实例中
    • (1)、State:
    • (2)、Mutations:
    • (3)、Actions:
    • (4)、Getters:

1、安装vuex依赖包

npm install vuex --save

2、导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3、创建 store 对象

export default new Vuex.Store({
  // state 中存放的就是全局共享的数据
  state: {
    count: 0
  }
})

4、将 store 对象挂载到vue实例中

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  // 将创建的共享数据对象,挂载到 Vue 实例中
  // 所有的组件,就可以直接用 store 中获取全局的数据了
  store
})

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

核心模块:State、Mutations、Actions、Module、Getters

在components目录下新建Addition.vue文件:

<template>
<div>
  <h3>当前最新的Count值为:</h3>
  <button>+1</button>
</div>
</template>

Subtraction.vue文件:

<template>
<div>
  <h3>当前最新的Count值为:</h3>
  <button>-1</button>
</div>
</template>

打开 App.vue 文件,引入俩个组件:

<template>
<div>
  <my-addition></my-addition>
  <p>------------------------------</p>
  <my-subtraction></my-subtraction>
</div>
</template>

<script>
import Addition from './components/Addition'
import Subtraction from './components/Subtraction'
export default {
  components: {
    'my-addition': Addition,
    'my-subtraction': Subtraction
  },
  data () {
    return {}
  }
}
</script>

(1)、State:

State 提供唯一的公告数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储。我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据。

// 创建store数据源,提供唯一公共数据
const store = new Vuex.Store({
   state: {
      count: 0
   }
})

组件访问 Store 中数据的第一种方式:

this.$store.state.全局数据名称

组件访问 Store 中数据的第二种方式:

// 1.从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

通过刚才导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的 computed 计算属性:

// 2.将全局数据,映射为当前组件的计算属性
computed: {
    ...mapState(['count'])
}

打开store/index.js文件,定义 count:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

回到Addition.vue文件中,用第一种方式:

<template>
<div>
  <h3>当前最新的Count值为:{{$store.state.count}}</h3>
  <button @click="handleAdd">+1</button>
</div>
</template>

回到 Subtraction.vue文件中,用第二种方式:

<template>
<div>
  <h3>当前最新的Count值为:{{count}}</h3>
  <button>-1</button>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  // 计算属性
  computed: {
    ...mapState(['count']) // 用...展开运算符把Count展开在资源属性里
  }
}
</script>

此时效果图:

(2)、Mutations:

Mutations 用于变更 Store 中的数据。只有 mutation里的函数才有权利去修改state中的数据。mutation非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。但是,mutation只允许同步函数,不能写异步的代码。

  • ①只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
  • ②通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

定义:

// 定义 Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      // 变更状态
      state.count++
    }
  }
})

第一种触发方式:

// 触发 mutation
methods: {
    handleAdd () {
      // 触发 mutations 的第一种方式
      this.$store.commit('add')
    }
}

打开store/index.js文件,定义mutations :

mutations: {
    add (state) {
      state.count++
    }
}

回到 Addition.vue文件中触发:

<template>
<div>
  <h3>当前最新的Count值为:{{$store.state.count}}</h3>
  <button @click="handleAdd">+1</button>
</div>
</template>

<script>
export default {
  methods: {
    handleAdd () {
      this.$store.commit('add')
    }
  }
}
</script>

此时点击+1按钮,就可以看到数值变为1。

还可以在触发 mutations 时传递参数:

// 定义 Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addN (state, step) {
      // 变更状态
      state.count += step
    }
  }
})

第一种触发方式:

// 触发 mutation
methods: {
    handleAdd () {
      this.$store.commit('addN', 3)
    }
}

打开store/index.js文件,增加一个addN:

mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      state.count += step
    }
}

回到 Addition.vue文件中,增加一个+N的按钮并增加点击事件:

<template>
<div>
  <h3>当前最新的Count值为:{{$store.state.count}}</h3>
  <button @click="handleAdd">+1</button>
  <button @click="handleAdd2">+N</button>
</div>
</template>

<script>
export default {
  data () {
    return {
      num: 2
    }
  },
  methods: {
    handleAdd () {
      this.$store.commit('add')
    },
    handleAdd2 () {
      // commit 的作用,就是调用某个 mutation 函数
      this.$store.commit('addN', this.num)
    }
  }
}
</script>

此时点击+N按钮就会每次增加2。

触发 mutations 的第二种方式:

// 1.从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数,将需要的 mutations 函数,映射为当前组件的 methods 方法:

// 2.将指定的 mutations 函数,映射为当前组件的methods 函数:
methods: {
   ...mapMutations({'add', 'addN'})
}

打开store/index.js文件,在mutations增加一个sub:

mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      state.count += step
    },
    sub (state) {
      state.count--
    }
},

回到 Subtraction.vue文件中,给-1按钮增加点击事件:

<template>
<div>
  <h3>当前最新的Count值为:{{count}}</h3>
  <button @click="handleSub">-1</button>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {}
  },
  // 计算属性
  computed: {
    ...mapState(['count']) // 用...展开运算符把Count展开在资源属性里
  },
  methods: {
    ...mapMutations(['sub']),
    handleSub () {
      this.sub()
    }
  }
}
</script>

这时刷新页面,点击-1按钮就会每次-1了。

打开store/index.js文件,增加一个subN:

mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      state.count += step
    },
    sub (state) {
      state.count--
    },
    subN (state, step) {
      state.count -= step
    }
},

回到Subtraction.vue文件中,在增加一个-N的按钮,并添加点击事件:

<button @click="handleSub2">-N</button>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['sub', 'subN']),
    handleSub () {
      this.sub()
    },
    handleSub2 () {
      this.subN(2)
    }
  }
}
</script>

这时点击-N按钮,每次就-2了。

下面有个需求,就是在点击+1按钮后延迟1秒在显示变化后的数值。

注意:不要在mutations函数中,执行异步操作。所以就需要用到了Action用于处理异步任务。

(3)、Actions:

Action 用于处理异步任务。

如果通过异步操作变更数据,必须通过 Action,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

定义:

// 定义 Action
const store = new Vuex.Store({
  // ...省略其他代码
  mutations: {
    add (state) {
      state.count++
    }
  },
  actions: {
    addAsync (context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})

第一种方式触发:

// 触发 Action
methods: {
  handleAdd () {
      // 触发 actions 的第一种方式
      this.$store.dispatch('addAsync')
  }
}

打开store/index.js文件,增加一个 addAsync:

actions: {
    addAsync (context) {
      setTimeout(() => {
        // 在 actions 中,不能直接修改 state 中的数据
        // 必须通过 context.commit() 触发某个 mutations 的函数才行
        context.commit('add')
      }, 1000)
    }
}

回到 Addition.vue文件中,增加一个+1 Async的按钮并增加点击事件:

<button @click="handleAdd3">+1 Async</button>

<script>
export default {
  methods: {
    handleAdd () {
      this.$store.commit('add')
    },
    handleAdd2 () {
      // commit 的作用,就是调用某个 mutation 函数
      this.$store.commit('addN', this.num)
    },
    handleAdd3 () {
      this.$store.dispatch('addAsync')
    }
  }
}
</script>

这时点击+1 Async按钮,可以实现延迟1秒后+1的功能了。

触发 actions 异步任务时携带参数:

定义:

// 定义 Action
const store = new Vuex.Store({
  // ...省略其他代码
  mutations: {
    addN (state, step) {
      state.count += step
    },
  },
  actions: {
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
  }
})

触发:

// 触发 Action
methods: {
  handleAdd () {
      // 在调用 dispatch 函数,触发 actions 时携带参数
      this.$store.dispatch('addNAsync', 5)
  }
}

打开 store/index.js 文件,增加一个 addNAsync:

actions: {
    addAsync (context) {
      setTimeout(() => {
        // 在 actions 中,不能直接修改 state 中的数据
        // 必须通过 context.commit() 触发某个 mutations 的函数才行
        context.commit('add')
      }, 1000)
    },
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
}

回到 Addition.vue 文件中,增加一个+N Async的按钮并增加点击事件:

<button @click="handleAdd4">+N Async</button>

<script>
export default {
  methods: {
    handleAdd4 () {
      // 在调用 dispatch 函数,触发 actions 时携带参数
      this.$store.dispatch('addNAsync', 5)
    }
  }
}
</script>

这时点击+N Async按钮,可以实现延迟1秒后+5的功能。

触发 actions 的第二种方式:

// 1.从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

通过刚才导入的 mapActions 函数,将需要的 actions 函数,映射为当前组件的 methods 方法:

// 2.将指定的 actions 函数,映射为当前组件的 methods 函数
methods: {
  ...mapActions(['addAsync', 'addNAsync'])
}

打开 store/index.js 文件,在 actions 增加一个 subAsync:

actions: {
    addAsync (context) {
      setTimeout(() => {
        // 在 actions 中,不能直接修改 state 中的数据
        // 必须通过 context.commit() 触发某个 mutations 的函数才行
        context.commit('add')
      }, 1000)
    },
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
    subAsync (context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000)
    }
}

回到 Subtraction.vue 文件中,在增加一个-1 Async的按钮,并添加点击事件:

<button @click="handleSub3">-1 Async</button>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync']),
    handleSub () {
      this.sub()
    },
    handleSub2 () {
      this.subN(2)
    },
    handleSub3 () {
      this.subAsync()
    }
  }
}
</script>

还有个更简单的方式:

<button @click="subAsync">-1 Async</button>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['subAsync'])
  }
}
</script>

这样实现的效果是一样的。

下面用同样的思路来实现-N的异步操作:

打开 store/index.js 文件,增加一个 subNAsync:

actions: {
    subNAsync (context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
}

回到 Subtraction.vue 文件中,在增加一个-N Async的按钮:

<button @click="subNAsync(3)">-N Async</button>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['subAsync', 'subNAsync'])
  }
}
</script>

这时点击-N Async按钮,可以实现延迟1秒后-3的功能。

(4)、Getters:

Getter 用于对 Store 中的数据进行加工处理形成新的数据。不会修改 state 里的源数据,只起到一个包装器的作用,将 state 里的数据变一种形式然后返回出来。
① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
② Store 中数据发生变化,Getter 包装出来的数据也会跟着变化。

定义:

// 定义 Getter
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum: state => {
      return '当前最新的数量是【'+ state.count +'】'
    }
  }
})

使用 getters 的第一种方式:

this.$store.getters.名称

我们可以把文字的内容删除掉,然后用 getters 来替换:

打开 store/index.js 文件,定义getters:

getters: {
    showNum (state) {
      return '当前最新的数量是【' + state.count + '】'
    }
}

回到 Addition.vue 文件修改:

<h3>{{$store.getters.showNum}}</h3>

此时刷新页面,已经变为了 getters 中的内容,效果图:

使用 getters 的第二种方式:

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['showNum'])
}

打开 Subtraction.vue 文件修改:

<h3>{{showNum}}</h3>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  // 计算属性
  computed: {
    ...mapState(['count']), // 用...展开运算符把Count展开在资源属性里
    ...mapGetters(['showNum'])
  }
}
</script>

效果图:

到此这篇关于VueX安装及使用基础教程的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vuex命名空间的使用

    目录 Vuex由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 因此,Vuex 允许我们将 store 分割成模块(module),每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块. 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的,这样使得多个模块能够对同一 mutation 或 action 作出响应.如果希望你的模块具有更高的

  • vue基础入门之vuex安装与使用

    目录 1.什么是vuex 2.安装和引入 3.vuex的使用 4.流程介绍 5.mutation 6.getters过滤 7.Action--异步处理 8.Module 总结 本教程为入门教程,如有错误,请各位前端大佬指出. 1.什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.详细介绍可以参照官网文档vuex.vuejs.org/zh/ 下面简单介绍vuex 2.安装和引入

  • Vue 搭建Vuex环境详解

    目录 搭建Vuex环境 总结 搭建Vuex环境 在src目录下创建一个文件夹store,在store文件夹内创建一个index.js文件 index.js用于创建Vuex中最核心的store // scr/vuex/index.js // 引入Vuex import Vuex from 'vuex' // 用于响应组件中的动作 const actions = {} // 用于操作数据 const mutations = {} // 用于存储数据 const state = {} // 创建sto

  • vue实际运用之vuex持久化详解

    目录 vuex持久化 总结 vuex持久化 vuex:刷新浏览器,vuex中的state会重新变为初始状态 解决办法: 使用vuex-persistedstate插件 (实际就是自动存在本地存储中) 安装 npm i -S vuex-persistedstate 引入及配置:在store下的index.js中 import Vue from 'vue' import Vuex from 'vuex' //引入 import persistedState from 'vuex-persisteds

  • Vue项目中如何运用vuex的实战记录

    目录 Vuex 是什么? vuex使用周期图 我的store目录 实现一个vuex的示例 总结 Vuex 是什么? TIP

  • Vue学习之Vuex的使用详解

    目录 简介 优缺点 优点 缺点 使用场景 示例 安装Vuex并引入 1.安装vuex 2.编写vuex的store 3.main.js引入CounterStore.js 业务代码 测试 简介 说明 本文介绍Vue的插件:Vuex.包括:优缺点.使用场景.示例. 官网 官网文档 API vuex-store 优缺点 优点 1.响应式 属于 vue 生态一环,,能够触发响应式的渲染页面更新. (localStorage 就不会) 2.可预测的方式改变数据 避免数据污染 3.无需转换数据 JS 原生的

  • Vuex总体案例详解

    目录 一.简介 二.优点 三.使用步骤 1. 安装Vuex 2. 引用Vuex 3. 创建仓库Store 四.包含模块 1. State 2. Getters 3. Mutations 4. Action 5. Modules 五.Vuex最最简单的项目实例 1. 存储数据 2. 获取数据 3. store文件目录结构 index.js state.js mutations.js actions.js getters.js 4. 使用store 一.简介 我们来看看对 Vuex 比较专业的介绍:

  • vuex的核心概念和基本使用详解

    目录 介绍 开始 安装 ①直接下载方式 ②CND方式 ③NPM方式 ④Yarn方式 NPM方式安装的使用方式 store概念及使用 概念: 定义 使用 mutations概念及使用 概念: 使用: 定义 使用 action概念及使用 概念: 定义 使用 getters概念及使用 概念: 定义 使用 总结 介绍 Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享 开始 安装 ①直接下载方式 创建一个 vuex.js 文件 将https://unpkg.com/vue

  • VueX安装及使用基础教程

    目录 1.安装vuex依赖包 2.导入vuex包 3.创建 store 对象 4.将 store 对象挂载到vue实例中 (1).State: (2).Mutations: (3).Actions: (4).Getters: 1.安装vuex依赖包 npm install vuex --save 2.导入vuex包 import Vuex from 'vuex' Vue.use(Vuex) 3.创建 store 对象 export default new Vuex.Store({ // stat

  • Docker CentOS7的系统上安装部署以及基础教程

    说明: 本文介绍如何在CentOS7的系统上安装部署Docker环境,本文参考Docker官方文档如下链接: https://docs.docker.com/engine/installation/centos/ CentOS7的系统上安装部署Docker环境 1 CentOS7安装(略) 2 升级系统 yum update 升级完成后需要重启下系统. 3 添加docker yum源 执行如下命令: cat >/etc/yum.repos.d/docker.repo name=Docker Re

  • windows版本下mysql的安装启动和基础配置图文教程详解

    下载: 第一步 : 打开网址(进入官网下载) :https://www.mysql.com ,点击downloads之后跳转到https://www.mysql.com/downloads 第二步 :跳转至网址https://dev.mysql.com/downloads/,选择Community选项 第三步 :点击MySQL Community Server进入https://dev.mysql.com/downloads/mysql/页面,再点击5.6版本的数据库 第四步:windows操作

  • mpvue+vuex搭建小程序详细教程(完整步骤)

    本文介绍了mpvue+vuex搭建小程序详细教程(完整步骤),分享给大家,具体如下: 源码 mpvue-vuex-demo 构成 1.采用mpvue 官方脚手架搭建项目底层结构 2.采用Fly.js 作为http请求库 3.引入mpvue-router-patach,以便在mpvue小程序中能使用vue-router的写法 目录结构 ├── src // 我们的项目的源码编写文件 │ ├── components // 组件目录 │ ├── common //静态资源 │ │ └── font

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • php基础教程

    php简介 当前网络技术发展日新月异,各种基于服务端创建动态网站的脚本语言更是层出不穷.其中PHP以其简单.易用.可移植性强等特点,在众多的动态网站语言技术中独树一帜.那么到底什么是PHP,如何使用PHP?本章将来回答这些问题.通过本章的学习,将使读者对PHP有一个大致的了解,并将学会如何把PHP代码加入普通Web页中. 1.1  关于静态网页与动态网页 目前网上的网页有静态网页与动态网页两种形式.在讲这两种网页之前,先了解一下网络构成中的客户机(Client)与服务器(Server).服务器是

  • Win2008服务器或VPS安全配置基础教程

    当然,这里的安全设置教程对Windows Server 2003同样有效,只是部分步骤有所不同,仅供参考. 其实,不管是windows服务器系统,还是linux服务器系统,只要设置好安全策略,都能最大程度上地保证服务器安全,说不上用linux一定比windows安全,关键是看你怎么用,怎么设置安全策略,怎么避免漏洞被利用;windows服务器系统要保证安全,关键是要避免这个系统的漏洞被利用.下面是具体的安全配置基础教程,仅供参考,按个人喜欢而设置: 修改管理员账号及密码 windows 2008

  • Python Flask基础教程示例代码

    本文研究的主要是Python Flask基础教程,具体介绍如下. 安装:pip install flask即可 一个简单的Flask from flask import Flask #导入Flask app = Flask(__name__) #创建一个Flask实例 #设置路由,即url @app.route('/') #url对应的函数 def hello_world(): #返回的页面 return 'Hello World!' #这个不是作为模块导入的时候运行,比如这个文件为aa.py,

  • python基础教程项目五之虚拟茶话会

    几乎在学习.使用任何一种编程语言的时候,关于socket的练习从来都不会少,尤其是会写一些局域网的通信的东西.所以书上的这个项目刚好可以练习一下socket编程. 这个练习的整体思路首先有一个聊天的服务器,这个服务器的功能主要是提供客户端socket的连接.存储每个客户端的连接session,处理每个连接发送的消息.解析客户端发送的数据.就这些,至于客户端方面不需要写代码,用系统的telnet工具即可. 我觉得有了上面的分析,剩下的这个程序就没有什么说的了,当然,除了那两个把socket封装的类

随机推荐