做一个简单的vuex如何使用的介绍:

先安装:

npm i vuex --save-dev

新建一个store文件夹,
在store文件夹中建一个index.js文件,在该文件中:
        import Vue from 'vue'
        import vuex from 'vuex'
        Vue.use(vuex)
        var state={   //state中的属性就是需要在vuex中存放的数据
            name:"电脑",
    age:2,
     data:'布拉布拉'       
        }
        
        var actions={     //异步方法,比如这里就定义了一个叫做changeName的方法
            changeName(context,name){
                context.commit('changeName',name)
            }
        }
        var mutations={    //同步方法,  这里的方法命名最好与上面的一样,比如这里都是changeName
            changeName(state,newName){
                state.name=newName        //改变state中的name值为newName
            }
        }
 
        var store=new vuex.Store({
            state,
            actions,
            mutations
        })
    export default store
=================================================================
在main.js文件中,引入store:
import store from './store'         //vuex状态管理器
        new Vue({
            el:"#app",
            router,
            store
        })
 
    // 在组件中调用state中的数据:比如name的方式
        {{$store.state.name}}
 //在组件中触发change方法,然后再在该方法中调用vuex中的changeName方法的方式:
        <button @click="change">改变名字</button>
 
        {
            methods:{
                change(){
          // 这一步与vuex中的   changeName(state,newName){  state.name=newName } 相对应,  至此,vuex中的name就被修改成了  '新电脑'
                    this.$store.dispatch("changeName",'新电脑')     
                }
            }
        }
 
 
 总结:
    state  :中存放vuex中的数据
    actions  :中定义异步方法
    mutations :中定义同步方法
 this.$store.dispatch("changeName",'新电脑')    :调用vuex中的方法、传参的方式
    $store.state.name    :使用vuex中的数据,比如使用name的方式

vue中怎么使用vuex的更多相关文章

  1. vue中状态管理vuex的使用分享

    一.main.js中引入 store import store from './store' window.HMO_APP = new Vue({ router, store, render: h = ...

  2. vue中前端弹窗队列展示

    在前端写一个弹窗可能很简单,那如果同时有多个弹窗呢 这样的话就要考虑弹窗的展示问题,肯定是不能叠加在一起的,这时候就要通过队列(先进先出)来展示 思路就是根据队列来实现,至于具体的实现方式,可以在项目 ...

  3. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  4. 【翻译】使用Vuex解决Vue中的身份验证

    翻译原文链接:https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex 我的翻译小站:https://www.zcfy ...

  5. Vue爬坑之vuex初识

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

  6. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  7. vue创建状态管理(vuex的store机制)

    1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...

  8. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  9. Vue之状态管理(vuex)与接口调用

    Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...

随机推荐

  1. HTML - form 表单提交

    form 表单提交 数据发送 disabled:不发送 display_none:发送 type_hidden:发送 readonly:发送 测试 html: <!DOCTYPE html> ...

  2. 一个DRF框架的小案例

    第一步:安装DRF DRF需要以下依赖: Python (2.7, 3.2, 3.3, 3.4, 3.5, 3.6) Django (1.10, 1.11, 2.0) DRF是以Django扩展应用的 ...

  3. 类Calendar

    /* * Calendar类概述及其方法 * * Calendar类概述 * Calendar类是一个抽象类,它为特定瞬间与一组诸如YEAR.MONTH.DAY_OF_MONTH.HOUR等 * 日历 ...

  4. laravel使用artisan报错SQLSTATE[42S02]: Base table or view not found: 1146

    说明你在应用初始化阶段使用到了数据库层面的东西,然而当时数据库不存在这个表/字段,所以会报错 需要在初始化比如 config 目录配置中,使用了数据库,在使用前需要添加一层判断,如果不存在 你需要用到 ...

  5. eclipse 背景绿豆沙颜色

    General -> Editors -> Text Editors -> Appearance color options -> Background color 色调:85 ...

  6. centos 7下安装pycharm专业版

    1.下载pycharm的linux版本的软件包,下载地址: http://www.jetbrains.com/pycharm/download/#section=linux 2.解压 $ tar -x ...

  7. linux 简单安装mongodb

    Linux 安装mongodb 1.下载mongodb linux wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-amazon- ...

  8. C#中拼音模糊匹配汉字智能搜索

    准备: 微软官方出了一个专用的汉字转拼音包Microsoft Visual Studio International Pack 1.0 SR1 首先到官网http://www.microsoft.co ...

  9. layer.msg()自动关闭后刷新页面

    layer.msg("2秒就消失哦", { time: 2000 }, function () {                    window.location.href ...

  10. Apache solr 6.6.0安装

    Apache solr 6.6.0安装 最近使用了Apache solr搜索引擎框架,solr是基于lucene的一个搜索服务器,lucene也是Apache的一个开源项目:对于学习搜索引擎来说,这个 ...