SHARE
TWEET

Untitled

a guest Dec 6th, 2019 91 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // src/main.js
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import Vuex from 'vuex'
  5. import createPersistedState from 'vuex-persistedstate'
  6. import i18n from '@/plugins/i18n';
  7. import FlagIcon from 'vue-flag-icon'
  8. import VueSession from 'vue-session'
  9. import VueClipboard from 'vue-clipboard2'
  10. import sharedMutations from 'vuex-shared-mutations'
  11. import VueWait from 'vue-wait'
  12. import axios from 'axios'
  13. import VueAxios from 'vue-axios'
  14. // import reactiveStorage from "vue-reactive-storage"
  15.  
  16. Vue.use(VueWait);
  17. Vue.use(Vuex)
  18. const store = new Vuex.Store({
  19.   state: {
  20.     count: 0
  21.   },
  22.   plugins: [createPersistedState(), sharedMutations({ predicate: ['increment', 'decrement'] })],
  23.   mutations: {
  24.     increment(state) {
  25.         state.count++
  26.     },
  27.     decrement(state) {
  28.         state.count--
  29.     },
  30.     increment2(state) {
  31.       state.count += 2;
  32.     }
  33.   }
  34. });
  35. Vue.use(VueSession)
  36. Vue.use(FlagIcon)
  37. Vue.use(VueClipboard)
  38. Vue.use(VueAxios, axios)
  39.  
  40. Vue.config.productionTip = false
  41.  
  42. import router from './router/'
  43.  
  44.  
  45. var vm = new Vue({
  46.   router,
  47.   store,
  48.   i18n,
  49.   wait: new VueWait(),
  50.   render: h => h(App)
  51. })
  52. vm.$mount('#app')
  53.  
  54. // export const vueInstance = vm
  55.  
  56. // src/components/TestComponents.vue
  57. <template lang="html">
  58.   <div class="">
  59.     <div class="vuex-persistedstate mt-5 mb-5">
  60.       <h1>Сохранение state приложения (vuex-persistedstate)</h1>
  61.       <p>{{ count }}</p>
  62.         <p>
  63.             <button @click="increment">+</button>
  64.             <button @click="decrement">-</button>
  65.         </p>
  66.         <small>
  67.         Check out your localStorage to see the updates.
  68.       </small>
  69.     </div>
  70.     <div class="vuex-shared-mutations mt-5 mb-5">
  71.       <h1>vuex-shared-mutations</h1>
  72.       <h1>{{ $store.state.count }}</h1>
  73.           <button @click="$store.commit('decrement');">-</button>
  74.           <button @click="$store.commit('increment');">+</button>
  75.           <button @click="$store.commit('increment2');">+2</button>
  76.           <hr>
  77.           <p>
  78.             Open this example in
  79.             <a
  80.              href="/"
  81.              target="_blank"
  82.            >multiple</a>
  83.             tabs and play with
  84.             <b>+</b>,
  85.             <b>-</b>, and
  86.             <b>+2</b> buttons.
  87.           </p>
  88.           <p>
  89.             <b>+</b> and
  90.             <b>-</b> mutations are shared using
  91.             <a
  92.              href="https://www.npmjs.com/package/vuex-shared-mutations"
  93.              target="_blank"
  94.            >vuex-shared-mutations</a>, so the value will be in sync while you're using these buttons
  95.           </p>
  96.           <p>
  97.             <b>+2</b> mutation, however, is not shared, so you can put your tabs
  98.             out-of-sync. This is intentional, we're sharing
  99.             <b>mutations</b>, not entire
  100.             system state
  101.           </p>
  102.           <hr>
  103.           <p>
  104.             <a href="https://github.com/xanf/vuex-shared-mutations/tree/master/examples/simple">Demo source</a>
  105.           </p>
  106.     </div>
  107.     <div class="vuex-loading mt-5 mb-5">
  108.       <h1>vuex-loading</h1>
  109.       <v-wait for="my list is to load">
  110.           <template slot="waiting">
  111.             <div>
  112.               Loading the list...
  113.             </div>
  114.           </template>
  115.           <div class="binary-tree-container">
  116.               <div class="wrapped-binary-container">
  117.                   <TreeChart :json="treeDataUser" />
  118.               </div>
  119.           </div>
  120.           <button @click='load'>Load list again.</button>
  121.         </v-wait>
  122.     </div>
  123.   </div>
  124. </template>
  125.  
  126. <script>
  127. import TreeChart from "./network-tree/TreeChart"
  128. import JQuery from 'jquery'
  129. import 'jquery.cookie'
  130. import axios from 'axios'
  131.  
  132. let $ = JQuery
  133.  
  134. export default {
  135.   data() {
  136.       return {
  137.         testStr: '',
  138.         treeDataUser: null,
  139.         postBody: '',
  140.         mockData: localStorage.getItem('binary_data')
  141.       }
  142.   },
  143.   components: {
  144.     TreeChart
  145.   },
  146.   computed: {
  147.       count() {
  148.         return this.$store.state.count;
  149.       }
  150.   },
  151.   methods: {
  152.     increment() {
  153.       this.$store.commit('increment');
  154.     },
  155.     decrement() {
  156.       this.$store.commit('decrement');
  157.     },
  158.     async load() {
  159.           // start waiting
  160.           this.$wait.start('my list is to load');
  161.  
  162.           this.treeDataUser = await new Promise(resolve => {
  163.             setTimeout(() => resolve(JSON.parse(this.mockData)), 5000);
  164.           });
  165.  
  166.           // stop waiting
  167.           this.$wait.end('my list is to load');
  168.       }
  169. },
  170.  
  171.   mounted() {
  172.     let access_token = $.cookie('access_token')
  173.     console.log(access_token)
  174.     let email = $.cookie('email')
  175.     console.log(email)
  176.     let tablename = 'actual_binary_tree'
  177.     let json = "{}"
  178.  
  179.     let formData = new FormData()
  180.  
  181.     formData.append('access_token', access_token)
  182.     formData.append('email', email)
  183.     formData.append('name', tablename)
  184.     formData.append('data', json)
  185.     console.log(formData)
  186.  
  187.     axios.post('https://api.leonardo.fund/get', formData,
  188.     {headers: {
  189.           'Content-type': 'application/x-www-form-urlencoded',
  190.     }})
  191.     .then((response) => {
  192.      console.log(JSON.stringify(response))
  193.     })
  194.     .catch((error) => {
  195.      console.log(error)
  196.     });
  197.  
  198.       this.load();
  199.     }
  200. }
  201. </script>
  202.  
  203. <style lang="css" scoped>
  204. .binary-tree-container {
  205.     width: 100%;
  206. }
  207. .wrapped-binary-container {
  208.     overflow-x: scroll;
  209.     display:flex;
  210.     justify-content: center;
  211. }
  212. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top