小编Ber*_*ert的帖子

我正在尝试研究vue2,并想知道是否有任何方法可以轻松跟踪元素在视口中是否可见,以便我们可以在向下滚动页面时执行滑入框等操作.任何npm包或任何可以建议的？谢谢.

我正在构建这个Vue 2应用程序,我一直在阅读一个人应该使用Vuex State管理,一开始我不太了解它的概念,但现在在玩了Vue之后,我可以看到它是一个更大的应用程序.

但我的问题是,有人可以从Dev控制台或任何形式访问存储在store.js中的数据,我的意思是那些我不会渲染到浏览器的数据？

我可以将灵敏数据保存在商店,敏感,我的意思是,用户点击此链接,向此用户发送消息,在此页面上花了这么多时间等...并且平均时间将所有这些数据上传到我的数据库..

Vuex商店是否适合这种工作/工作？

干杯

我有一个vue组件Jumbotron.vue:

<template lang="html">
  <div class="jumbotron" style="border-radius:0px; color:#fff;">
    <div class="container">

    </div>
  </div>
</template>

和其他页面组件Main.vue:

<template>
  <div class="root">
    <navbar></navbar>
    <jumbotron>
      <h1 class="display-4">I want to add here, to the jumbotron's div container some h1 and paragraph</h1>
      <p class="lead ">Like this paragraph</p>
    </jumbotron>
    <words></words>
  </div>
</template>

但我不能向jumbotron添加内容,因为它错了.我不想在Jumbotron.vue中添加内容(p和h1),因为我想在其中使用不同内容的Jumbotron.vue超过1次.这可能吗？

对于api_token的vue-axios auth,我使用帮助文件api.js.

我收到错误 - 未捕获TypeError:无法读取未定义的属性'getters'.

我认为api.js帮助器看不到全局存储 - Vuex $ store.

在其他组件中,我不需要导入Vuex存储,他可以在app的任何地方使用.

如何使用这个.$ storage in helper？

//api.js 
import axios from 'axios'

let api_token = this.$store.getters.get_api_token  //got error!


export function get(url) {
    return axios({
        method: 'GET',
        url: url,
        headers: {
            'Authorization': `Bearer ${api_token}`
        }
    })
}

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        api_token: 'vnbnvnvnvb',

    },
    getters: {
        get_api_token(state){
            return state.api_token
        }
    },
});

export default store


//App.vue
import {get} from './helpers/api'; …

我一直在玩AWS EC2并且非常喜欢它.但是有一个缺点,实例可能会因硬件故障或其他原因而消失.在我运作的第一周,这发生在我身上.我想知道是否有好的解决方案,备份一个MySQL的数据库,这样我不会失去我的客户证书？

//商店

export default {
  state: {
    aboutModels: []
  },
  actions: {
    findBy: ({commit}, about)=> {
      //do getModels
      var aboutModels = [{name: 'About'}] //Vue.resource('/abouts').get(about)
      commit('setModels', aboutModels)
    }
  },
  getters: {
    getModels(state){
      return state.aboutModels
    }
  },
  mutations: {
    setModels: (state, aboutModels)=> {
      state.aboutModels = aboutModels
    }
  }
}

//零件

import {mapActions, mapGetters} from "vuex";

export default {
  name: 'About',
  template: require('./about.template'),
  style: require('./about.style'),
  created () {
    document.title = 'About'
    this.findBy()
  },
  computed: mapGetters({
    abouts: 'getModels'
  }),
  methods: mapActions({
    findBy: 'findBy'
  })
} …

在vue2.0事件$dispatch和$broadcast已经过时了.

我发现它$dispatch与之相似$emit.

它们之间的区别是什么？它是安全的直接更换$dispatch成$emit迁移时.

开始使用小型vuejs应用程序.如何在根组件中打开websocket连接并在其他组件中重用相同的连接？

我希望组件能够通过相同的连接发送和接收.这些组件将被绑定到路由,以便根组件和为路由呈现的组件之间没有直接的父子关系.

App.vue:

<template>
  <div id="app">
    <h1>My app</h1>
    <router-link to="/">P&L</router-link>
    <router-link to="/other-page">other page</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

  name: 'app',
  data () {
    return {
      ws: null
    }
  },

  created () {
    this.ws = new WebSocket('ws://localhost:8123/ws')
  },
  methods: {
    }
  }
}
</script>

现在我想重新使用ws,other-page以便每次改变路线时不重新连接.

我希望能够进行ajax调用并使用返回的结果使用vue.js生成下拉菜单的选项。我可以做这个：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

.js文件

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

但是我不想对我的选项进行硬编码，而是来自ajax调用。

Ajax调用看起来像这样：

function pullEmployees(){
        var eventOwnerId = $('#eventOwner').val();
        var eventOwnerName = $('#eventOwner :selected').text();
        $.ajax({
            url: "employees.cfm",
            data: {
                eventOwnerId: eventOwnerId,
                eventOwnerName: eventOwnerName,
                method : "updateOwners"
            },

            success: function(results) { …

我在vue上下文之外有一个模块(javascript文件).我需要从这个javascript文件发送动作.可能吗 ？如果有,那怎么样？

jsfile.js(Javascript文件)

const detail = {};

detail.validateLocation = (location) => {
  // need to dispatch one action from here.
  // dispatch('SET_LOCATION', {city: 'California'})
  // how to dispatch action ?
}

export default detail;

action.js

export default {
  SET_LOCATION: ({ commit}, data) => {
    commit('SET_LOCATION', data);
  },
}

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export function createStore() {
  return new Vuex.Store({
    modules: {},
    state: { …