vuex 簡單的使用

首先是專案目錄結構：

我的vuex的目錄是這樣的，簡單說一下每個js檔案的作用吧：

首先是 index.js 檔案：這個檔案主要配置 vuex 的入口及檔案的配置：

import vue from 'vue';
import vuex from 'vuex';
vue.use(vuex);
import state from './state';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export default new vuex.store()

我的 actions.js 裡面是不做對 state 裡的狀態做處理操作的，它只是乙個提交的非同步過程

import * as types from './types';
export default ) => ,
changech: () => ,
changeiscustom: (,params) => 
}

在 vuex 修改狀態都會在 mutations.js這個階段裡，它接收 actions過來的方法及狀態值，然後去修改state裡面的狀態：

import * as types from './types';
export default ,
[types.lang_en]: (state) => ,
[types.is_custom]: (state,params) => 
}

然後通過 getters.js裡面統一分發出去：

export default ,
getiscustom(state) 
}

state.js 上面也說到了，就是存放狀態的地方：

export default

types.js主要是些定義方法名：

export const lang_ch = 'lang_ch';//中文
export const lang_en = 'lang_en';//英文
export const is_custom = 'is_custom';//資金流水頁面

這樣就實現了乙個簡單的資料處理 vuex 系統流程。

可能會有疑問，下面會一點一點揭開這個 vuex 的神秘面紗。

我們在搭建乙個 vue 專案的時候，通常會用到 vue-cli 這個腳手架，那麼隨著前端在發展，那麼目前 vue-cli3.0 已經發布了，最近我也嘗試的玩了一下，確實簡便了許多......扯遠啦。

可能會有很多同學會在專案剛提出來，需求都還不是很明確的時候就開始搭建前端框架了，然後隨著需求乙個乙個被提出來，然後去一點一點增加依賴的安裝和外掛程式的安裝。在這裡，我還是想說一下，盡量在需求明確後再開始搭框架，這樣才能使得前端框架能達到適合這個專案。而不是乙個公司就乙個框架，所以依賴都一樣。

下面就開始我的 vuex 的運用之路，話不多說，上**：

import vue from 'vue'
import router from './router'
import store from './store'
import 'animate.css'
import './registerserviceworker'
import common from './common';
vue.use(common);//註冊全域性函式
import filters from './filters';
object.keys(filters).foreach(key=>vue.filter(key,filters[key]));//註冊過濾器
import vuei18n from 'vue-i18n';
vue.use(vuei18n);
const i18n = new vuei18n(
});vue.config.productiontip = false;
router.aftereach((to, from, next) => );
router.beforeeach((to,from,next)=>else 
}else 
});new vue(}
...import from 'vuex';
...mounted() else 
}... //計算屬性
computed:

vuex的簡單使用

使用了 vue lic腳手架我不說得很理論，我就說得很通俗在store檔案下面寫成 index.js是載入全部下面是 modules檔案下的wallet.js export default getters mutations actions src 這是index.js import vue ...

vuex的簡單使用

專案結構一建立store 建立分割成模組 module 的state 專案中建立store資料夾，同時建立index.js，在modules中定義userinfo這個state index.js import vue from vue import vuex from vuex vue.use...

vuex的簡單使用

1,vuex是專為vue.js設計的狀態管理模式,集中儲存和管理應用程式中所有元件的狀態,適用於中大型單頁應用 2,使用vuex的第一步引入 import vue from vue import vuex from vuex vue.use vuex 同樣需要在main.js中引入store im...

vuex 簡單的使用

vuex的簡單使用

vuex的簡單使用

vuex的簡單使用

相關推薦