##簡介
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
vuex分為三大部分：
state，驅動應用的數據源；
view，以聲明方式將 state 映射到視圖；
actions，響應在 view 上的用戶輸入導致的狀態變化。
以下是vuex官網提供的的示意圖：

一、初始化

vue init webpack-simple 文件名 cd 文件名 npm install npm install vuex -D // 安裝vuex npm run dev

二、在src創建store.js

// 引入vue和vuex import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex);// state 管理數據 const state = {count: 10, }; // mutations 處理數據變化 const mutations = {increment: (state) => {state.count++;},decrement: (state) => {state.count--;} }; // actions 處理要做什么，異步請求，判斷，流程控制 const actions = {increment: ({commit}) => {commit('increment')},decrement: ({commit}) => {commit('decrement')},clickOdd: ({commit, state}) => {if (state.count % 2 == 0){commit('increment')}},clickAsync: ({commit}) => {new Promise((resolve) =>{setTimeout(function() {alert(1);}, 1000);})} };const getters = {count: state => {return state.count;},getOdd: state => {return state.count%2 == 0? "偶數": "奇數";} }export default new Vuex.Store({state,mutations,actions,getters });

三、main.js引用

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

四、App.vue

<template><div id="app"><h3>Welcome vuex</h3><input type="button" value="增加" @click="increment"><input type="button" value="減少" @click="decrement"><input type="button" value="偶數才能點擊+" @click="clickOdd"><input type="button" value="點擊異步" @click="clickAsync"><div>現在的數字為：{{count}}, 他現在是{{getOdd}}</div></div> </template><script>// mapAction 管理事件// mapGetters 獲取數據 import {mapGetters, mapActions} from 'vuex' export default {computed: mapGetters(['count','getOdd',]),methods: mapActions(['increment','decrement','clickOdd','clickAsync']) } </script><style></style>

---

官方推薦使用這樣的目錄結構

|--src|--store|--index.js //|--types.js // state數據|--mutations.js // mytations|--actions.js // actions|--getter.js // 獲取數據

index.js

// 引入vue和vuex import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex); // 引入actions和mutations import actions from './actions' import mutations from './mutations' import getters from './getters'export default new Vuex.Store({modules: {mutations},actions,getters })

types.js

export const INCREMENT = 'INCREMENT' export const DECREMENT = 'DECREMENT'

mutations.js

import {INCREMENT,DECREMENT } from './types' const state = {count: 20 };const mutations = {[INCREMENT]: (state) => {state.count++;},[DECREMENT]: (state) => {state.count--;} }; export default {state,mutations }

actions.js

import * as types from './types' export default {increment: ({commit}) => {commit(types.INCREMENT);},decrement: ({commit}) => {commit(types.DECREMENT);},clickOdd: ({commit, state}) => {if (state.mutations.count % 2 == 0) {commit(types.INCREMENT);}},clickAsync: ({commit}) => {new Promise((resolve) => {setTimeout(function() {commit(types.INCREMENT)}, 1000)})} }

getter.js

export default {count: (state)=> {return state.count;},getOdd: (state)=> {return state.count % 2 == 0 ? "偶數": "奇數";} }

App.vue不用變，只需改動main.js的引用

import store from './store/'

總結

以上是生活随笔為你收集整理的Vue入门 ---- vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。