zoukankan      html  css  js  c++  java
  • vuex入门

    整理自‘游鱼与渔’的文章http://www.cnblogs.com/first-time/p/6815036.html,建议看原文。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>vuex</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.0/vuex.js"></script>
    </head>
    <body>
        <div id="app">
            <seeme></seeme>
        </div>
    
        <script type="text/javascript">
            Vue.use(Vuex);
            var myStore = new Vuex.Store({
                state: {
                    //存放组件之间共享的数据,在$store.state中
                    name: 'Cherry',
                    age: 24,
                    num: 1
                },
                mutations:{
                    //通过commit一个mutation,显示地变化state中的数据
                    //mutations下的函数接受state作为第一个参数
                    //以及一个payload对象作为第二个参数,payload是提交的内容。
                    //mutations必须是同步方法
                    //mutations只是定义方法,需要在组件中提交(commit)
                    change(state,a) {
                        console.log(state.num += a);
                    },
                    changeAsync(state,a) {
                        console.log(state.num += a);
                    }
                },
                getters:{
                    //getters用于筛选state中的数据
                    //getters下的函数接受state作为第一个参数,过滤后的数据在$store.getters中
                    getAge(state) {
                        return state.age;
                    }
                },
                actions: {
                    //actions中函数可以执行异步方法
                    //actions需要通过mutations提交的函数实现异步
                    //actions下的函数接受的第一个参数context是与$store实例相同对象
                    //第二个参数接收mutationgs函数的payload参数
                    //actions需要在组件中提交(dispatch)
    
                    add(context,value) {
                        setTimeout(function() {
                            context.commit('changeAsync',value);
                        },1000)
                    }
                }
            })
    
            Vue.component('seeme',{
                template: `<div>
                                <p @click="changeNum">姓名:{{name}} 年龄:{{age}} 次数:{{num}}</p>
                                <button @click="changeNumAsync">ChangeAsync</button>
                            </div>`,
                computed: {
                    name: function() {
                        return    this.$store.state.name;
                    },
                    age: function() {
                        return this.$store.getters.getAge;
                    },
                    num: function() {
                        return this.$store.state.num;
                    }
                },
                mounted: function() {
                    console.log(this);
                },
                methods: {
                    changeNum() {
                        //这里提交mutations中的变化
                        this.$store.commit('change',10);
                    },
                    changeNumAsync() {
                        //这里提交actions中的变化
                        this.$store.dispatch('add',5);
                    }
                }
            })
    
            new Vue({
                el:"#app",
                data:{
                    name: 'Eric'
                },
                //将myStore添加到实例中,实例中的组件则可以使用
                store: myStore,
                mounted: function(){
                    console.log(this);
                }
    
            })
        </script>
    </body>
    </html>

     4个核心选项:state mutations  getters  actions 

    那如何获取到state的数据呢?

        一般会在组件的计算属性(computed)获取state的数据(因为,计算属性会监控数据变化,一旦发生改变就会响应)

    state:用来存放组件之间共享的数据。他跟组件的data选项类似,只不过data选项是用来存放组件的私有数据。

    getters:有时候,我们需要对state的数据进行筛选,过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据,那我们就必须到处重复写该计算属性函数;或者将其提取到一个公共的工具函数中,并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了,getters就是干这个的,你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么,组件是如何获取经过getters过滤的数据呢? 过滤的数据会存放到$store.getters对象中。

    mutations:前面讲到的都是如何获取state的数据,那如何把数据存储到state中呢?在 Vuex store 中,实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。  mutations下的函数接收state作为参数,接收一个叫做payload(载荷)的东东作为第二个参数,这个东东是用来记录开发者使用该函数的一些信息,比如说提交了什么,提交的东西是用来干什么的,包含多个字段,所以载荷一般是对象(其实这个东西跟git的commit很类似)还有一点需要注意:mutations方法必须是同步方法

    actions:

    actions和mutations的区别

          1.Actions 提交的是 mutations,而不是直接变更状态。也就是说,actions会通过mutations,让mutations帮他提交数据的变更。

          2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

       context:context是与 store 实例具有相同方法和属性的对象。可以通过context.statecontext.getters来获取 state 和 getters。

       dispatch:翻译为‘派发、派遣’的意思,触发事件时,dispatch就会通知actions(跟commit一样一样的)参数跟commit也是一样的。

     action的大体流程:

             1.在actions选项里添加函数(异步)并提交到对应的函数(在mutation选项里)中  context.commit('changeAsync',value);

           2. 在组件里: changeNumAnsyc:function(){this.$store.dispatch('add', 5);}  将dispatch“指向”actions选项里的函数

           3. 在mutations选项里,要有对应的函数 changeAsync:function(state,a){console.log(state.num +=a);}

  • 相关阅读:
    5-python基础—获取某个目录下的文件列表(适用于任何系统)
    Automated, Self-Service Provisioning of VMs Using HyperForm (Part 1) (使用HyperForm自动配置虚拟机(第1部分)
    CloudStack Support in Apache libcloud(Apache libcloud中对CloudStack支持)
    Deploying MicroProfile-Based Java Apps to Bluemix(将基于MicroProfile的Java应用程序部署到Bluemix)
    Adding Persistent Storage to Red Hat CDK Kit 3.0 (在Red Hat CDK Kit 3.0添加永久性存储)
    Carve Your Laptop Into VMs Using Vagrant(使用Vagran把您笔记本电脑刻录成虚拟机)
    使用Python生成一张用于登陆验证的字符图片
    Jupyter notebook的安装方法
    Ubuntu16.04使用Anaconda5搭建TensorFlow使用环境 图文详细教程
    不同时区的换算
  • 原文地址:https://www.cnblogs.com/FunkyEric/p/9040104.html
Copyright © 2011-2022 走看看