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.安装和引入

先安装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
    /* eslint-disable no-new */
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
    /* eslint-disable no-new */
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
    /* eslint-disable no-new */
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
    /* eslint-disable no-new */
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
    /* eslint-disable no-new */
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安装与使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 简单的vuex 的使用案例笔记

    1. npm install vuex 2. 在src 下 新建文件夹 store (为什么是这个单词,vuex 是用来状态管理的,用储存一些组件的状态,取存贮,仓库之意),store 文件下 新建文件 index.js  (为什么是index.js? 在导入的时候,会第一选择这个叫index的文件) 3. index.js import 导入 vue 和vuex (import 是es6 的语法, es5 是 require), 代码如下: 这里的demo 是一个 改变 app 的模式 的一个

  • Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm install axios)完成后,进行以下配置: main.js //引入axios import Axios from 'axios' //修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求 Vue.prototype.$axios=Axios l

  • 全站最详细的Vuex教程

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的. 2.新建一个store文件夹(

  • Vuex中的State使用介绍

    现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State,一个正面例子来证实,同时也介绍一下Vue核心概念State. Vuex 使用单一状态树--是的,用一个对象就包含了全部的应用层级状态.至此它便作为一个"唯一数据源 (SSOT)"而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照. 单状态树和模块化并不冲突--在后面的章节里我们会讨论如何将状态和状态变

  • vuex学习之Actions的用法详解

    Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的. 沿用vuex学习---简介的案例:这里是加10 减1 1.在store.js 中 代码为: import Vue from 'vue' import Vuex from 'vuex' //使用vuex模块 Vue.use(Vuex); //声明静态常量为4 const state = { count : 4 }; const mu

  • Vue.js实战之Vuex的入门教程

    前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App

  • Vuex简单入门

    1.Vuex是什么? 学院派:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式:集中存储和管理应用的所有组件状态. 理解:以上这4个词是我们理解的关键.状态:什么是状态,我们可以通俗的理解为数据.Vue只关心视图层,那么视图的状态如何来确定?我们知道是通过数据驱动,这里的状态管理可以简单理解为管理数据.集中存储:Vue只关心视图,那么我们需要一个仓库(Store)来存储数据,而且是所有的数据集中存储,视图和数据就可以分析.管理:除了存储,还可以管理数据,也就是计算.处理数据.所有组

  • vuex存值与取值的实例

    组件内取值 computed: { value() { return this.$store.state.userData.xxx; } }, 组件内存值 methods: { fn() { this.$store.commit('setValue',xxx) } } store的matution.js中 setValue(state,xxx){ state.userData.xxx= xxx; }, store的index.js中 const state = { userData: { "xx

  • 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.安装和引入

  • 又一款MVVM组件 Vue基础语法和常用指令(1)

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼 关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.React.Angularj

  • 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

  • VUE零基础入门axios的使用

    目录 一.axios是什么 二.axios的特点 三.axios怎么安装 四.在VUE全局挂载 导入 挂载 使用 五.axios便捷方法 六.axios基础方法 七.axios执行结果 八.config axios 配置 九.restFul 九.如何审查元素 一.axios是什么 axios是一款ajax请求工具,是一个用于发送ajax请求的HTTP库,本质上是对AJAX的封装.而且Axios支持 Promise操作, 让我们无需再使用传统callback方式来进行异步编程.(Promise 是

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

    目录 初识vue 模板语法 插值语法 指令语法 数据绑定 单向绑定 双向绑定 el和data的两种写法 el data Object.defineProperty方法 事件处理 事件修饰符 键盘事件 定义命名(不常用) 初识vue vue工作时,必须先创建Vue实例,且要传入一个配置对象 容器内的代码依然符合html规范,混入了一些特殊的Vue语法 <div id="root"> <h1>hello,{{name}}</h1> </div>

  • Leaflet 基础入门教程示例

    目录 什么是Webgis? 什么是Leaflet? 在Vue中安装Leaflet,与其他依赖 在App.vue中使用 初始化地图 chinaProvider地图瓦片 addControls使用工具集 attribution创建自定义版权 Marker创建点 创建线 Polygon创建三角形 Popup弹窗&Tooltip提示 Geojson区域描边 总结 什么是Webgis? webGis又称之为网络地理信息系统,GIS的全名是Geographic Information System,它是在计

  • Bootstrap零基础入门教程(二)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

  • 从vue基础开始创建一个简单的增删改查的实例代码(推荐)

    1.安装vue-cli    cnpm install vue-cli -g  --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目的目录结构及说明 build是webpack配置 build.js       // 生产环境构建代码 check-versions.js // 检查node&npm等版本 utils.js          // 构建配置公用工具 vue-loader.conf.js // vue加载器

  • React Native基础入门之初步使用Flexbox布局

    前言 在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小步>. 在本篇里,让我们一起来了解一下,什么是Flexbox布局,以及如何使用. 一.长度的单位 在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示"与设备像素密度无关的逻辑像素点". 这个怎么理解呢? 我们知道,屏幕上一

  • 一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

随机推荐