• Vue:初次使用vueX


    什么是vueX

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

    vueX的组成

    主要分为三个部分:

    • state,驱动应用的数据源;
    • view,以声明方式将 state 映射到视图;
    • actions,响应在 view 上的用户输入导致的状态变化。

    vueX使用场景

    如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。

    一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

    vueX应用

    每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。

    由于项目刚刚开始,只是用来存储一些状态。后期如果遇到什么问题,会继续补全。

    npm install --save vuex

    上述是通过npm安装的vueX,引入:

    import Vuex from 'vuex'
    import Vue from 'vue'
    
    Vue.use(Vuex)

    接着我们应该创建我们的仓库‘store’

    const store = new Vuex.Store({
        state:{
            isChoose:true,
            userInfo:{},
            count:0,
            all_url:'http://localhost:8080/#/home/'
            // all_url:'https://ap.t-house.cn/',
            // test_url:'https://ap.dev.t-house.cn/'
        },
        mutations:{
            /*更改 Vuex 的 store 中的状态的唯一方法是提交
             mutation。每一个mutation都有一个字符串的事件
             类型(type)和一个回调函数(handler)。
             mutation是同步操作*/
            /*increment (state) {
              // 变更状态
              state.count++;
            },*/
            /*你不能直接调用一个 mutation handler。这个选项
            更像是事件注册:“当触发一个类型为 increment 的
            mutation 时,调用此函数。”要唤醒一个 
            mutation handler,你需要以相应的 type 调用 
            store.commit 方法:store.commit("")
            */
            /*同时你也可以想commit传递额外参数,即载荷(payload)
            */
            /*increments (state,n) {
              // 变更状态
              console.log(state.count)
              state.count+=n;
            }*/
        },
        actions:{
            /*action和mutation类似。
            区别在于:action是异步操作;
                      action提交并不直接改变状态
            */
            increment(context){
                console.log(context)
                context.commit('increments')
            }
        }
    })

    mutation可以通过store.commit("increments")激活

    action可以通过store.dispatch('increment')激活

    在store中,我们可以声明一些全局变量,这样便于我们后期维护和修改。

    官方文档

  • 相关阅读:
    MySQL Limit优化(转)
    MySQL数据库性能优化思路与解决方法(一转)
    Mysql占用CPU过高如何优化?(转)
    数据库方面两个简单实用的优化方法(转)
    硬盘扩容9999T
    python内涵段子爬取练习
    jmeter环境配置
    PyCharm3.0默认快捷键
    python3 操作页面上各种元素的方法
    python3 selenium webdriver 元素定位xpath定位骚操作
  • 原文地址:https://www.cnblogs.com/WQLong/p/7999739.html
Copyright © 2020-2023  润新知