首先安裝vuexnpm install vuex --save

其次專案中引入vueximport Vue from "vue"

import Vuex from "vuex"

Vue.use(Vuex)

第一種：傻瓜式寫法所有東西都集中在一個頁面裡，保證你一看就懂了，並且我寫的的這麼傻瓜。開始例項化配置let store = new Vuex.store({

//state是用來配置資料中心需要儲存的資料

state: {

totalPrice: 0

},

//getters可以理解成對state裡面的資料進行二次封裝，或者儲存新資料

//或者可以理解成關於state的計算屬性

getters: {

getTotal(state) {

return state.totalPrice

}

},

//mutations設定動作，用來操作資料中心，但是隻能同步，只有actions才可以非同步操作資料

mutations: {

increment(state, price) {

state.totalPrice += price

}

},

//actions是mutations之前執行的動作，可非同步操作一切相關互動後，透過呼叫mutations來修改資料中心

actions: {

increse(context, price) { //context固定，其相當於store

context.commit("increment", price)

}

}

})

//全域性呼叫Vuex配置

new Vue({ store })

子元件操作狀態管理在任何頁面邏輯元件內、基礎元件內都可以直接使用剛配置的totalPrice狀態；由於剛剛配置的是全域性，因此並不需要進行任何引入，多餘的就都不寫了，只寫關鍵部分，只要去研究過vue的人，都看得懂。//自定義一個計算屬性

computed: {

totalPrice() {

return this.$store.state.totalPrice //直接從state裡去找

//當然還有第二種找法，從getters中去取資料，不用特地去state狀態頂層

//return this.$store.getters.getTotal()

},

methods: {

addOne() {

//子元件操作mutations狀態資料，但是mutations記住不能進行非同步操作，只能同步

this.$store.commit("increment", this.price)

//當然還有第二種操作法，使用actions作為一箇中介，有需要的話可以先非同步後同步

//this.$store.dispatch("increase", this.price)

}

}

}

第二種：部分分離法如果說全部寫在一個頁面是傻瓜，那麼後面在看過了vue-element-ui這個框架後，對vuex有了一種更深層次的理解，每個檔案的引入和關聯都緊密聯絡，只要“通道”正確。下面的例子是模擬一個後臺登陸介面的賬號密碼提交，大家憑空想象吧~~儲存賬號密碼採用js-cookie方式，安裝方法：npm install js-cookie --save例項化配置store中的index.jsimport Vue from "vue"

import Vuex from "vuex"

import user from "./user" //同級資料夾user.js

import getters from "./getters" //同級資料夾下的getters.js

Vue.use(vuex)

const store new Vuex.Store({

modules: {

user

},

getters

})

export default store

getters.js中配置state的計算屬性const getters = {

token: state => state.user.token //user對映的是index.js中modules的user配置

}

export default getters

單純建立user.js，從java的角度相當於實體的get，set，定義欄位型別的.java檔案import { login } from "@/api/login"

import { getToken, setToken, removeToken} from "@/utils/auth"

const user = {

state: {

token: getToken() //進入網站前可以先從cookie中取值填充使用者角色

},

mutations: {

SET_TOKEN: (state, token) => { //state固定

state.token = token

}

},

actions: {

Login({ commit }, userInfo) { //{commit, state}固定

const username = userInfo.username.trim()

return new Promise((resolve, reject) => { //登陸非同步請求去後臺查詢使用者

login(username, userInfo.password).then(response => {

const data = response.data

setToken(data.token) //請求成功，將當前使用者存在cookie裡

commit("SET_TOKEN", data.token) //將當前登陸使用者儲存在全網共同使用

resolve()

}).catch(error => {

reject(error)

})

})

}

}

}

api資料夾下login.js中登陸的非同步請求export function login(username, password) {

return Promise.resolve({

data: { token: "adminRole" }

})

}

const TokenKey = "Admin-Token"

export function setToken(token) {

return Cookies.set(TokenKey, token)

}

export function getToken() {

return Cookies.get(TokenKey)

}

export function removeToken() {

return Cookies.remove(TokenKey)

}

邏輯頁面methods: {

handleLogin() {

//觸發actions定義的Login，一看就知道Login裡面一定是執行了非同步操作

this.$store.dispatch("Login", this.loginForm).then(() => {

this.$router.push("/")

}).catch(() => {

console.log("登陸失敗")

})

}

}

第三種：完全分離法這是我最喜歡的一種，自從研究了全網音樂播放器後，深深的愛上了它，簡直是方便的時候就引入vuex，不需要的時候，就當然是不引入啦；一直以來，按需載入的需求一直是我勇於追求的理念，前進的方向，直接上圖上程式碼。同樣是登陸介面，但這次用的是storage，安裝方法：npm install good-storage --save資料夾示意圖，清晰不糊塗，正~main.js入口例項化配置import store from "./store"

new Vue({

el: "#app",

store,

render: h => h(App)

})

index.js例項化store（18-12-06日新增）import Vue from"vue"

import Vuex from "vuex"

import * as actions from "./actions"

import * as getters from "./getters"

import state from "./state"

import mutations from "./mutations"

import createLogger from "vuex/dist/logger" // 在控制檯列印日誌，以便更好的觀察狀態的變化

Vue.use(Vuex)

// 設定只有在開發環境的時候才打印日誌

const debug = process.env.NODE_ENV !== "production"

export default new Vuex.Store({

actions,

getters,

state,

mutations,

strict: debug,

plugins: debug ? [createLogger()] : []

})

state.js配置“欄位名”import { getToken } from "@/common/js/cache"

const state = {

token: getToken()

}

export default state

getters.js對映state資料export const token = state => state.token

mutation-types.js設定常量方法名export const SET_TOKEN = "SET_TOKEN"

mutations就是一些方法，state代表state.js，第二個引數是傳的形參import * as types from "./mutation-types"

const mutations = {

[types.SET_TOKEN](state, token) {

state.token = token

}

}

export default mutations

actions非同步操作import * as types from "./mutation-types"

import {setToken, clearToken} from "@/common/js/cache"

export const Login= function ({ commit }, userInfo) {

const username = userInfo.username.trim()

return new Promise((resolve, reject) => {

login(username, userInfo.password).then(response => {

const data = response.data

setToken(data.token) //請求成功，將當前使用者存在storage裡

commit(types.SET_TOKEN, data.token) //將當前登陸使用者儲存在全網共同使用

resolve()

}).catch(error => {

reject(error)

})

})

}

//login跟第二種部分分離方法一樣哦~不寫了

關於storage的存取刪import storage from "good-storage"

const TokenKey = "TokenKey"

export function getSearch() {

return storage.get(TokenKey, [])

}

export function clearToken() {

storage.remove(TokenKey)

return ""

}

export function setToken(token) {

storage.set(TokenKey, token)

return songs

}

頁面邏輯//根據需求自行加入mapGetters, mapMutations, mapActions

import {mapGetters, mapMutations, mapActions} from "vuex"

//mapGetters是配置計算屬性，陣列形式，顧名思義取的值來自getter.js

computed: {

..mapGetters([

"token"

])

}

//mapMutations,mapActions是配置在方法內作為方法呼叫

methods: {

//呼叫方法

handleLogin() {

this.Login(this.loginForm).then(() => {

this.$router.push("/")

}).catch(() => {

console.log("登陸失敗")

})

},

//mapMutaions是json，方法名自定義

...mapMutations({

_setToken: "SET_TOKEN"

}),

//mapActions是陣列，方法名已經在actions.js中定義好了

...mapActions([

"Login"

])

}

好了以上就是資料化處理的大概