# 安裝
根目錄運行
~~~
npm install vuex -S
~~~
# 配置
在src/main.js配置vuex
~~~
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
~~~
src目錄新建store文件夾,新建5個js 此處把vuex分成了5個文件
store文件夾下的5個js,里面包含了一個user例子
actions.js
~~~
import * as types from './types'
// action 存放的是方法
export default {
getUser: ({
commit
}, user) => {
commit(types.GETUSER, user);
}
}
~~~
getters.js
~~~
// getters 存放的是變量
export default {
// 用戶個人信息
user: (state) => state.user,
}
~~~
index.js
~~~
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import mutations from './mutations'
import actions from './actions'
export default new Vuex.Store({
modules: {
mutations
},
actions
});
~~~
mutations.js
~~~
import {
GETUSER
} from './types'
import getters from './getters'
import * as types from "./types";
const state = {
// 保存在localstorage中一份,處理f5刷新
// (后期可學習更方便的方式,目前還不會只能這樣了)
user: window.JSON.parse(localStorage.getItem("user")),
};
// 用于具體改變數據
const mutations = {
[GETUSER](state, user) {
state.user = user;
localStorage.setItem("user", window.JSON.stringify(user));
}
};
export default {
state,
mutations,
getters
}
~~~
types.js
~~~
export const GETUSER = 'GETUSER';
~~~
