\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{fortyseven}
\pdfinfo{
  /Title (basic-vuex.pdf)
  /Creator (Cheatography)
  /Author (fortyseven)
  /Subject (Basic Vuex Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{7DA300}
\definecolor{LightBackground}{HTML}{F6F9EF}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Basic Vuex Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{fortyseven} via \textcolor{DarkBackground}{\uline{cheatography.com/63267/cs/16121/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}fortyseven \\
  \uline{cheatography.com/fortyseven} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 18th June, 2018.\\
   Updated 18th June, 2018.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Glossary}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Getters}} - Functions used to return values from the store. Use these when computations need to be performed on the state value before they are passed to the caller. (You can also access the state directly.) \newline % Row Count 5 (+ 5)
{\bf{Mutations}} - Functions that commit changes to the state, and can process the values being passed before saving them. (You can also modify the state directly.) \newline % Row Count 9 (+ 4)
{\bf{Actions}} - Similar to mutations, except they commit data typically using during asynchronous tasks. They're optional, but you should get into the habit of using these whenever mutations are present. \newline % Row Count 14 (+ 5)
Vuex provides many more features outside of the scope of this quick reference. Consult the manual for more information! \newline % Row Count 17 (+ 3)
\seqsplit{https://vuex.vuejs.org/guide/}% Row Count 18 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Vuex 2.1 adds namespacing for modules! \seqsplit{https://github.com/vuejs/vuex/releases/tag/v2.1.0}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{The Store Object}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import Vue from 'vue'; \newline import Vuex from 'vuex'; \newline  \newline Vue.use(Vuex); \newline  \newline export const store = new Vuex.Store(\{ \newline     state: \{ \newline         my\_property: 47 \newline     \}, \newline     getters: \{ \newline         getMyProperty: state =\textgreater{} \{ \newline             return state.my\_property; \newline         \} \newline     \}, \newline     mutations: \{ \newline         setMyProperty: ( state, payload ) =\textgreater{} \{ \newline             state.my\_property = payload; \newline         \} \newline     \}, \newline     actions: \{ \newline         doChangeMyProperty: ( context, payload ) =\textgreater{} \{ \newline             \seqsplit{context.commit('setMyProperty'}, payload); \newline         \}, \newline         doAsyncChangeMyProperty: ( \{ commit \}, payload ) =\textgreater{} \{ \newline             // Using a timeout, but any async operation can go here \newline             setTimeout(function () \{ \newline                 commit('setMyProperty', payload); \newline             \}, 1000); \newline  \newline         \} \newline     \} \newline \});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{The {\emph{getter}}, {\emph{mutations}}, and {\emph{actions}} properties are optional.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Modules}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{const moduleA = \{ \newline     state: \{ ... \}, \newline     mutations: \{ ... \}, \newline     actions: \{ ... \}, \newline     getters: \{ ... \} \newline \} \newline  \newline const moduleB = \{ \newline     state: \{ ... \}, \newline     mutations: \{ ... \}, \newline     actions: \{ ... \} \newline \} \newline  \newline const store = new Vuex.Store(\{ \newline     modules: \{ \newline         a: moduleA, \newline         b: moduleB \newline     \} \newline \}) \newline  \newline  \newline store.state.a // moduleA's state \newline store.state.b // moduleB's state} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{From \seqsplit{https://vuex.vuejs.org/guide/modules.html}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{The Vuex Cycle}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/fortyseven_1529287792_temp.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Using Getters}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}template\textgreater{} \newline      \textless{}div\textgreater{} \newline         \textless{}div\textgreater{}Value = \{\{ getMyProperty \}\}\textless{}/div\textgreater{} \newline         \textless{}div\textgreater{}Value = \{\{ getStoredProp \}\}\textless{}/div\textgreater{} \newline     \textless{}/div\textgreater{} \newline \textless{}/template\textgreater{} \newline  \newline \textless{}script\textgreater{} \newline     import \{ mapGetters \} from  'vuex'; \newline     export default \{ \newline         computed: \{ \newline             ...mapGetters({[} \newline                 'getMyProperty' \newline             {]}), \newline             // or, without helper... \newline             getStoredProp: () =\textgreater{} \{ \newline                   return \seqsplit{this.\$store.getters.getMyProperty;} \newline             \} \newline         \} \newline     \} \newline \textless{}/script\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Using Mutations}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}template\textgreater{} \newline     \textless{}div\textgreater{} \newline         \textless{}button @click="setMyProperty(22)"\textgreater{}Set to 22\textless{}/button\textgreater{} \newline         \textless{}button @click="setThatProp(0)"\textgreater{}Reset to 0\textless{}/button\textgreater{} \newline     \textless{}/div\textgreater{} \newline \textless{}/template\textgreater{} \newline  \newline \textless{}script\textgreater{} \newline     import \{ mapMutations \} from 'vuex'; \newline     export default \{ \newline         methods: \{ \newline             ...mapMutations({[} \newline                 'setMyProperty' \newline             {]}), \newline             // Or without helper... \newline             setThatProp( value ) \{ \newline                 this.\$store.commit( 'setMyProperty', value ); \newline             \} \newline         \} \newline     \} \newline \textless{}/script\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Using Actions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}template\textgreater{} \newline     \textless{}div\textgreater{} \newline         \textless{}button @click="doChangeMyProperty(5)"\textgreater{}Change me to 5\textless{}/button\textgreater{} \newline     \textless{}/div\textgreater{} \newline \textless{}/template\textgreater{} \newline  \newline \textless{}script\textgreater{} \newline     import \{mapActions\} from 'vuex'; \newline     export default \{ \newline         methods: \{ \newline             ...mapActions({[} \newline                 \seqsplit{'doAsyncChangeMyProperty'}, \newline             {]}), \newline             // Or without helper... \newline             doThatThing( value ) \{ \newline                 \seqsplit{this.\$store.dispatch('doAsyncChangeMyProperty'}, value); \newline             \} \newline         \} \newline     \} \newline \textless{}/script\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Two-Way Binding}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}template\textgreater{} \newline     \textless{}div\textgreater{} \newline         \textless{}input type="text" v-model="my\_property"/\textgreater{} \newline         \{\{ my\_property \}\} \newline     \textless{}/div\textgreater{} \newline \textless{}/template\textgreater{} \newline  \newline \textless{}script\textgreater{} \newline     export default \{ \newline         computed: \{ \newline             my\_property: \{ \newline                 get() \{ \newline                     return \seqsplit{this.\$state.getters.my\_property;} \newline                 \}, \newline                 set( value ) \{ \newline                     \seqsplit{this.\$state.dispatch('setMyProperty'}, value); \newline                 \} \newline             \} \newline         \} \newline     \} \newline \textless{}/script\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\emph{This usage of computed properties with a getter/setter property is rarely used!}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}