首页 > 资讯 > 前端开发 > JavaScript >vue基础入门之vuex安装与使用

136

分享到

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

2024-04-02 19:04:59 136人浏览薄情痞子

摘要

目录1.什么是Vuex2.安装和引入3.vuex的使用4.流程介绍5.mutation6.getters过滤7.Action--异步处理8.Module总结本教程为入门教程，如有错误

1.什么是vuex

Vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.详细介绍可以参照官网文档vuex.vuejs.org/zh/

下面简单介绍vuex

2.安装和引入

先安装vuex。


npm install vuex --save

在main.js中引入后即可使用。


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局变量
        count: 31231
    }
})

Vue.config.productionTip = false
    
new Vue({
    el: '#app',
    router,
    //vuex必须加入
    store,
    components: { App },
    template: '<App/>'
})

3.vuex的使用


<template>
<div>
      老大有{{showData}}
      <HelloWorld2/>
</div>
</template>

<script>
import HelloWorld2 from './HelloWorld2'
import son from './son'

export default {
name: 'HelloWorld',
data () {
  return {
       message2:"",
       cou
    }
},
components:{
  HelloWorld2,
  son
},computed: {
  showData(){
    return this.$store.state.count;
  }
}
}

</script>


<template>
<div>
老二有{{$store.state.count}}
</div>
</template>

<script>
export default {
name: 'HelloWorld2',
data() {
      return {
      }
    }
}
</script>

4.流程介绍

如图当没有使用vuex时流程为： view->actions->state->view

使用了vuex后流程为vuecomponent->(dispatch)actions->(commit)mutations->(mutate)state->(render)->vuecomponent

5.mutation

状态更改，更改 Vuex 的 store 中的状态的唯一方法是提交mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in WEBpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局变量
        count: 31231
    },
    //更改状态方法
    mutations: {
        //state为上面的state
        aDDData(state) {
            // 变更状态
            state.count++
        }
    }
})

Vue.config.productionTip = false
    
new Vue({
    el: '#app',
    router,
    //vuex必须加入
    store,
    components: { App },
    template: '<App/>'
})

然后执行更改


<template>
<div>
      老大有{{showData}}
      <HelloWorld2/>
      <button type = "button" v-on:click = "changeData">  修改按钮    </button>
</div>
</template>

<script>
import HelloWorld2 from './HelloWorld2'
import son from './son'

export default {
name: 'HelloWorld',
data () {
  return {
       message2:"",
    }
},
components:{
  HelloWorld2,
  son
},computed: {
  showData(){
    return this.$store.state.count;
  }
},
methods: {
  //执行更改
  changeData(event){
      this.$store.commit("addData");
  }
}
}

</script>

6.getters过滤

可以限制mutation 比如小于0就不能减少了


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局变量
        count: 0
    },
    //更改状态方法
    mutations: {
        //state为上面的state
        addData(state) {
            // 变更状态
            state.count++
        }
    },
    //过滤
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    }
})

Vue.config.productionTip = false
    
new Vue({
    el: '#app',
    router,
    //vuex必须加入
    store,
    components: { App },
    template: '<App/>'
})

调用时


<template>
<div>
老二有{{$store.getters.getState}}
</div>
</template>

<script>
export default {
name: 'HelloWorld2',
data() {
      return {
      }
    }
}
</script>

7.Action--异步处理

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 mutation只能同步处理
main.js。示例如下：


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局变量
        count: 0
    },
    //更改状态方法
    mutations: {
        //state为上面的state
        addData(state) {
            // 变更状态
            state.count++
        }
    },
    //过滤
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    },
    actions: {
        //action触发的mutations方法 优势是异步处理
        addData(context) {
            //模拟异步
            setTimeout(() => {
                context.commit('addData')
            }, 1000)
        }
    }
})

Vue.config.productionTip = false
    
new Vue({
    el: '#app',
    router,
    //vuex必须加入
    store,
    components: { App },
    template: '<App/>'
})

在发送时应该调用action。


<template>
<div>
      老大有{{showData}}
      <HelloWorld2/>
      <button type = "button" v-on:click = "changeData">  修改按钮    </button>
</div>
</template>

<script>
import HelloWorld2 from './HelloWorld2'
import son from './son'

export default {
name: 'HelloWorld',
data () {
  return {
       message2:"",
    }
},
components:{
  HelloWorld2,
  son
},computed: {
  showData(){
    return this.$store.getters.getState;
  }
},
methods: {
  //执行更改
  changeData(event){
      //操作mutations方法
      //this.$store.commit("addData");
      //应该操作action而不是action触发的mutations方法
      this.$store.dispatch("addData");

  }
}
}

</script>

8.Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

如路由可以分割文件不在main.js中放入vuex 新建store/index.js


//vuex使用
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        //全局变量
        count: 0
    },
    //更改状态方法
    mutations: {
        //state为上面的state
        addData(state) {
            // 变更状态
            state.count++
        }
    },
    //过滤
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    },
    actions: {
        //action触发的mutations方法 优势是异步处理
        addData(context) {
            //模拟异步
            setTimeout(() => {
                context.commit('addData')
            }, 1000)
        }
    }
})

修改main.js


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'


Vue.config.productionTip = false
    
new Vue({
    el: '#app',
    router,
    //vuex必须加入
    store,
    components: { App },
    template: '<App/>'
})

我们还能把main.js中的state拿出新建store/state.js


export default {
    count: 0
}

然后index.js可以改成


//vuex使用
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'

Vue.use(Vuex)

export default new Vuex.Store({
    state: state,
    //更改状态方法
    mutations: {
        //state为上面的state
        addData(state) {
            // 变更状态
            state.count++
        }
    },
    //过滤
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    },
    actions: {
        //action触发的mutations方法 优势是异步处理
        addData(context) {
            //模拟异步
            setTimeout(() => {
                context.commit('addData')
            }, 1000)
        }
    }
})

总结

到此这篇关于vue入门之vuex安装与使用的文章就介绍到这了,更多相关vuex安装与使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue基础入门之vuex安装与使用

本文链接: https://www.lsjlt.com/news/132915.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

目录1.什么是vuex2.安装和引入3.vuex的使用4.流程介绍5.mutation6.getters过滤7.Action--异步处理8.Module总结本教程为入门教程，如有错误...

99+

2022-11-12
VueX安装及使用基础教程

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

99+

2022-11-13
VUE零基础入门axios的使用

目录一.axios是什么二.axios的特点三.axios怎么安装四.在VUE全局挂载导入挂载使用五.axios便捷方法六.axios基础方法七.axios执行结果八.config ...

99+

2022-11-13
Android基础入门之dataBinding如何使用

这篇“Android基础入门之dataBinding如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Android基础...

99+

2023-07-02
Javaweb基础入门requse原理与使用

request对象是什么？ Request对象的作用是与客户端交互，收集客户端的Form、Cookies、超链接，或者收集服务器端的环境变量。request对象是从客户端向服务器发出...

99+

2022-11-12
python入门基础之用户输入与模块初认识

一、注释当前行注释：# 被注释内容多行注释：""" 被注释内容 """ 二、用户输入 #!/usr/bin/env python #_*_coding:utf-8_*_ #name = raw_in...

99+

2022-06-04

模块入门基础
Node.js基础入门之模块与npm包管理器使用详解

目录require函数模块分类第三方模块1. 安装第三方模块2. 引入第三方模块3. 示例测试系统模块require注意事项exports导出对象1. exports示例2. exp...

99+

2022-11-13
Android基础入门之dataBinding的简单使用教程

目录前言1.前期准备1.1打开dataBinding1.2修改布局文件1.3修改Activity方法2.DataBinding的使用2.1属性更新2.2<data>标签2...

99+

2022-11-13
Java基础入门篇之如何使用For循环

这篇文章主要讲解了“Java基础入门篇之如何使用For循环”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Java基础入门篇之如何使用For循环”吧！一、for循环语句在java中...

99+

2023-06-15
零基础入门SpringMVC拦截器的配置与使用

在SpringMVC中我们说到了拦截器 , 它会在映射处理器(HandleMapping)执行时检查我们访问的地址是否配置拦截器 , 在拦截器中实现一些功能 &nbs...

99+

2022-11-13
PostGIS的安装与入门使用指南

目录一、安装PostGIS1.下载安装程序2.安装PostgreSQL二、创建空间数据库1.打开pgAdmin 42.登录到服务器3.创建空间数据库三、导入空间数据1.获取数据2.确...

99+

2022-11-12
Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

目录初识vue模板语法插值语法指令语法数据绑定单向绑定双向绑定el和data的两种写法eldataObject.defineProperty方法事件处理事件修饰符键盘事件定义命名(不...

99+

2022-11-13
Node.js基础入门之使用方式及模块化详解

目录什么是Node.js Node.js下载 Node.js和JavaScript的区别Node.js安装与验证 Node.js使用方式1. REPL模式2. 文...

99+

2022-11-13
PHP循环函数使用介绍之PHP基础入门教程

PHP中的循环主要用户执行相同代码块运行指定的次数。 PHP循环主要有四种：while，do…while，for，foreach。下面我们分开讲解每种循环的用法。 while语句： ...

99+

2022-11-15

PHP循环
Linux平台MySQL安装配置与管理入门_MySQL数据库基础与项目实战03

Linux平台MySQL安装配置与管理入门_MySQL数据库基础与项目实战03视频教程学习地址 http://edu.51cto.com/course/12294.htm...

99+

2022-10-18
Linux平台Percona安装配置与管理入门_MySQL数据库基础与项目实战05

Linux平台Percona安装配置与管理入门_MySQL数据库基础与项目实战05视频教程学习地址 http://edu.51cto.com/course/12557.h...

99+

2022-10-18
Node.js基础入门之path模块,url模块,http模块使用详解

目录path模块1. path模块示例2. path模块其他方法url模块1. 旧的解析方法2. 新的解析方法http模块1. 什么是HTTP协议？2. HTTP协议约束的细节3. ...

99+

2022-11-13
Django零基础入门之自定义标签及模板中的使用

目录自定义标签：第一部分（1）视图函数编写：（2）编写模板文件：（3）自定义标签实现：（4）效果展示：第二部分（1）视图函数编写：（2）编写模板文件：（3）自定义标签实现：第三部分紧...

99+

2022-11-12
Django零基础入门之自定义过滤器及模板中的使用

目录引言自定义过滤器（1）首先（2）内置过滤器lower的使用：（3）自定义过滤器的使用：（4）模板中使用自定义过滤器：（5）效果展示：引言分析Django内置的模板过滤器：通...

99+

2022-11-12
Java基础入门篇之如何使用面向对象和类的定义

这篇文章主要讲解了“Java基础入门篇之如何使用面向对象和类的定义”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Java基础入门篇之如何使用面向对象和类的定义”吧！一、面向对象面向对象是在程...

99+

2023-06-15