Vuex的简单入门

在Vue项目中安装Vuex

npm install vuex --save

在src目录下新建个store文件夹,里面新建index.js 在index.js文件夹中创建Vuex实例

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store=new Vuex.Store({
    state:{
       
    }
})

export default store//导出store

在main.js中引入该文件

import store from './store'

new Vue({
  store
})

在这里我们就引入完成了,现在开始编写业务代码 在store/index.js文件中,vuex中的数据源,我们需要保存的数据就保存在这里。

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store=new Vuex.Store({
    state:{
        count:100
    }
})

export default store//导出store

可以在组件中通过 this.$store.state来获取我们定义的数据;

<template>
  <div>
  <h1>{{this.$store.state.count}}</h1>
  </div>
</template>

页面上就打印个“100”

使用Getters

可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({
  state: {
    count: 100
  },
  getters: {
    divide: (state) => { //这里的state指向上面定义的
       return state.count/2;
    }
  }
})

export default store //导出store
<h2>{{this.$store.getters.divide}}</h2>

页面上就打印个“50”

使用Mutations

可以将 mutations可以理解为methods

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({
  state: {
    count: 100
  },
  getters: {
    divide: (state) => { //上面定义的state对象
       return state.count/2;
    }
 },
  mutations:{
      add(state){ //上面定义的state对象
        state.count = state.count + 1;
      },
      reduction(state){
        state.count = state.count - 1;
      }
  }
})

export default store //导出store

我们添加两个方法add和reduction,执行加1、减1的操作 在methods定义方法名,引入mutations中定义两个函数

<template>
  <div>
    <h1>{{this.$store.state.count}}</h1>
    <h2>{{this.$store.getters.divide}}</h2>
    <input type="button" value="+" @click="addcount" />
    <input type="button" value="-" @click="reductioncount" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    addcount() {
      this.$store.commit("add");
    },
    reductioncount() {
      this.$store.commit("reduction");
    }
  }
};
</script>

<style>
</style>

使用Action

Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。 Mutations只能是同步。

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({
  state: {
    count: 100
  },
  getters: {
    divide: (state) => { //上面定义的state对象
      return state.count / 2;
    }
  },
  mutations:{
      add(state){ //上面定义的state对象
        state.count = state.count + 1;
      },
      reduction(state){
        state.count = state.count - 1;
      }
  },
  actions:{
      addNum(context){ //接收一个与store实例具有相同方法属性的context对象
        context.commit("add"); //mutatuions里的方法名
      },
      reductionNum(context){
          context.commit("reduction");
      }
  }
})

export default store //导出store

在组件中接收

  methods: {
    addcount() {
      //this.$store.commit("addNum");
       this.$store.dispatch("addNum");
    },
    reductioncount() {
      //this.$store.commit("reductionNum");
      this.$store.dispatch("reductionNum");
    }
  }

我们还可以给方法添加参数

  methods: {
    addcount() {
      var n=20;
      //this.$store.commit("addNum");
       this.$store.dispatch("addNum",n);
    },
    reductioncount() {
      //this.$store.commit("reductionNum");
      this.$store.dispatch("reductionNum");
    }
  }

并且需要在mutations和actions都添加

  mutations:{
      add(state,n){ //上面定义的state对象
        state.count = state.count + n;
      },
      reduction(state){
        state.count = state.count - 1;
      }
  },
  actions:{
      addNum(context,n){ //接收一个与store实例具有相同方法属性的context对象
        context.commit("add",n);
      },
      reductionNum(context){
          context.commit("reduction");
      }
  }

mapState、mapGetters、mapActions 如果我们不喜欢这种在页面上使用“this.$stroe.state.count”这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;

<template>
  <div>
    <h1>页面获取的值{{this.$store.state.count}}</h1>
    <h2>Getters获取的值{{this.$store.getters.divide}}</h2>
    <h3>{{countNum}}</h3>
    <input type="button" value="+" @click="addcount" />
    <input type="button" value="-" @click="reductioncount" />
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      countNum: state => state.count
    })
  },
  methods: {
    addcount() {
      var n = 20;
      //this.$store.commit("addNum");
      this.$store.dispatch("addNum", n);
    },
    reductioncount() {
      //this.$store.commit("reductionNum");
      this.$store.dispatch("reductionNum");
    }
  }
};
</script>

<style>
</style>

Modules

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Koa中配置使用ejs模板引擎

    wePanda
  • vue-lazyload实现图片懒加载

    wePanda
  • 微信小程序实现图片上传限制数量和删除

    wePanda
  • Vuex详细介绍

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这是官网的说法,其实很简单:就是一个加强版的data! 在单页应用中会有一个data函数,里面...

    从入门到进错门
  • vuex学习笔记

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

    前端迷
  • Vue 之 Vuex 详细讲解

    在上篇文章 从零搭建 Vue 开发环境 中,学习了 Vue 的语法,如何使用 Vue 进行开发,学会了如何搭建开发环境,打包部署等;文章中也介绍了兄弟组件之间传...

    Java技术编程
  • 我对vuex的理解(一)

    上面有几个知识点:   1. 由于vuex的状态存储是响应式的,从store实例中获取状态最简单的方法就是在计算属性中返回某个状态。   2. 通过sto...

    Ewall
  • 基于高可用的可伸缩架构方法论生态

    高可用性对于构建高可伸缩系统是一个极其重要的因素,那么什么是可用性,系统可用性和可靠性之间怎么区分。

    用户6969969
  • 如何在Ubuntu 14.04上为IRC安装Lita Chat Bot

    许多现代DevOps团队在聊天室周围建立了越来越多的基础设施。有很多聊天室,从商业选项(如HipChat和Slack)到DIY选项(如IRC或Jabber / ...

    木纸鸢
  • Qt编写自定义控件38-高亮按钮

    高亮按钮控件,既可以作为类似于交通指示灯使用,也可以作为设备状态指示灯使用,控件内置多套颜色风格,还可以自己设置颜色风格,按钮可以增加文字显示,非常适合需要在状...

    feiyangqingyun

扫码关注云+社区

领取腾讯云代金券