Created
December 14, 2017 22:58
-
-
Save r2dev/45ec188caa33c21f04212794b3b628b3 to your computer and use it in GitHub Desktop.
vuex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" | |
| crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" | |
| crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" | |
| crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" | |
| crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <sale-type-dropdown /> | |
| </div> | |
| <script type="text/x-template" id="template-my-checkbox"> | |
| <div class="checkbox-wrapper" @click="check"> | |
| <div :class="{ checkbox: true, checked: checked }"></div> | |
| <div class="title">{{title}}</div> | |
| </div> | |
| </script> | |
| <script type="text/x-template" id="template-sale-type-dropdown"> | |
| <div class="dropdown"> | |
| <button | |
| class="btn btn-secondary dropdown-toggle" | |
| type="button" id="dropdownMenuButton" | |
| data-toggle="dropdown" | |
| aria-haspopup="true" | |
| aria-expanded="false" | |
| > | |
| {{dropdownTitle}} | |
| </button> | |
| <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | |
| <a | |
| class="dropdown-item" | |
| v-for="(value, index) in values" | |
| @click="handleItemClick(index, $event)" | |
| > | |
| <span>{{value}}</span> | |
| </a> | |
| </div> | |
| </div> | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/vue"></script> | |
| <script src="https://unpkg.com/vuex"></script> | |
| <script src="./index.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var store = new window.Vuex.Store({ | |
| actions: { | |
| changeValue(context, payload) { | |
| if (context.state.filter[payload.key] === payload.value) { | |
| } else { | |
| context.state.filter[payload.key] = payload.value; | |
| } | |
| } | |
| }, | |
| getters: { | |
| filter: state => { | |
| return state.filter; | |
| } | |
| }, | |
| plugins: [ | |
| function(context) { | |
| context.watch(context.getters.filter, function() { | |
| console.log("change"); | |
| }); | |
| } | |
| ] | |
| }); | |
| Vue.component("sale-type-dropdown", { | |
| template: "#template-sale-type-dropdown", | |
| beforeMount: function() { | |
| this.$store.registerModule("filter", { | |
| state: { | |
| sale: 0 | |
| }, | |
| mutations: { | |
| changeSale(state, payload) { | |
| state.sale = payload; | |
| } | |
| } | |
| }); | |
| }, | |
| props: { | |
| values: { | |
| type: Array, | |
| required: true, | |
| default: ["Sale", "Rent"] | |
| } | |
| }, | |
| methods: { | |
| handleItemClick: function(index, e) { | |
| this.$store.dispatch("changeValue", { | |
| key: "sale", | |
| value: index | |
| }); | |
| } | |
| }, | |
| computed: { | |
| dropdownTitle() { | |
| return this.values[this.$store.state.filter.sale]; | |
| } | |
| } | |
| }); | |
| var app = new Vue({ | |
| el: "#app", | |
| store: store | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment