Vuex simple tutorial, vuex simple tutorial

Vuex simple tutorial, vuex simple tutorial

What is Vuex?

Vuex is a centralized state management architecture designed specifically for vue. js. Status? I understand it as a part of the data attribute that needs to be shared with other vue components, which is called the status. In short, it is the attribute that needs to be shared in data.

Managing data between components using vuex

npm i vuex -S

Main. js

import Vue from 'vue'import App from './App.vue'import store from './store.js'new Vue({ store, el: '#app', render: h => h(App)})

Store. js

Import Vue from 'vue 'import Vuex from 'vuex' vue. use (Vuex) // The Initial Value let state = {count: 10}; const mutations = {add (context) {context. count ++}, decrease (context) {context. count -- }}; // The logical operation triggered by the event // The parameter is const actions = {add (add) {add. commit ('add')}, decrease (decrease) {decrease. commit ('crease')}, oddAdd ({commit, state}) {if (state. count % 2 = 0) {commit ('add') }}; // return the changed value const getters. = {Count (context) {return context. count}, getOdd (context) {return context. count % 2 = 0? 'Even ': 'odd'}; export default new Vuex. Store ({state, mutations, actions, getters })

App. vue

<Template> <div id = "app"> <button @ click = "add"> add </button> <button @ click = "decrease"> decrease </button> <button @ click = "oddAdd"> oddAdd </button> <div >{{ count }}</div> <div >{{ getOdd }}</div> </div>> </template> <script> import {mapGetters, mapActions} from 'vuex' export default {// the calculated value computed: mapGetters (['Count', 'getodd']), // trigger different functions in the event of a click event: mapActions (['add', 'crease ', 'odddadd'])} </script>

GitHub: https://github.com/wmui

Summary

The above is a simple tutorial on vuex introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!