ホームページ > 記事 > ウェブフロントエンド > わかりやすい！ VUEX 状態倉庫管理の詳細説明
わかりやすい！ VUEX 状態倉庫管理の詳細説明
- 藏色散人転載
- 2022-08-10 14:25:311676ブラウズ
Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。簡単に言うと、アプリケーションが状態を共有する複数のコンポーネントに遭遇した場合は、vuex を使用します。
VueX は、Vue.js アプリケーション用に特別に設計された状態管理フレームワークで、各 Vue コンポーネントの変更可能な状態を均一に管理および維持します
シナリオ: 複数のコンポーネントがデータを共有するか、コンポーネント間でデータを渡すtime
vuex の 5 つの中心的な概念:
- State: 共有状態、vuex の基本データ。変数を保存するために使用され、コンポーネント データ内のデータと同等ですが、次のようになります。グローバル変数。
- Getter: 状態に基づいて派生された状態。コンポーネント内の計算されたプロパティと同等です。
- Mutation: vuex でストアの共有状態を変更し、ミューテーションを送信して状態を変更し、データを同期的に操作するメソッド。通常、非同期データを取得するアクション、送信されたデータを取得するアクションに使用されます。コミットを通じてミューテーションを実行し、ミューテーション データの状態で同期的に動作します。
- アクション: 非同期操作をサポートします。これを使用して、リクエスト内のデータを非同期的に取得し、取得したデータをミューテーションに同期的に送信して、データの Ajax 非同期リクエストを実装します。ミューテーションはそのデータを状態に同期します。 。
- モジュール: モジュール式 vuex。後のプロジェクト管理を容易にするために、各モジュールに独自の状態、ミューテーション、アクション、ゲッターを持たせることができ、構造が非常に明確で管理しやすくなります。
メリットとデメリットは何ですか?
主な利点は、データとメソッドをグローバルに共有できることです。統合管理に便利です。
欠点: 状態変数はページが更新された後に復元およびクリアされ、Cookie のように永続的に保存されません。
ページの更新後に vuex 状態データが失われる問題を解決する方法リフレッシュしましたか？
まず、なぜ失われたのかについて話しましょう。
ストア内のデータは実行メモリに保存されているため、ページが更新されると、ページは vue インスタンスを再読み込みし、ストア内のデータが再割り当てされます。 ?
たとえば、ログイン情報を要求した後、まずそれを localStorage に保存し、state の変数値を sessionStorage の変数値にバインドし、ミューテーションを変更するときに state と localStorage を同時に変更できます。最後のページでは、vuex の変数を直接使用します。 [関連する推奨事項:
vue.js ビデオ チュートリアル
]
vuex
を使用してインストールを正式に開始します。ターミナルを開いてコマンド ライン npm install を入力します。 vuex - -save to download vuex
vuex アプリケーション コア管理ウェアハウス ビルド ストア
ここに新しいストア フォルダーを作成し、index.js という名前の JS を作成します。状態、突然変異、アクション、ゲッターがストアに導入され、ストア オブジェクトが公開されます。
以下はindex.jsのコードです
/*
vuex最核心的管理对象 store
*/import Vue from 'vue';import Vuex from 'vuex';
// 分别引入这四个文件 这四个文件的内容和用法在下面分别讲到import state from './state';import mutations from './mutations';import actions from './actions';import getters from './getters';
//声明使用插件Vue.use(Vuex)//new 一个Vuex的对象,将state,mutation,action,getters配置到vuex的store中,方便管理数据export default new Vuex.Store({
state,
mutations,
actions,
getters,})vueインスタンスにストアをマウントmain.js内
import store from './store'// ..........new Vue({
el: '#app',
router,
store, // ***
render: h => h(App)})state状態管理データ
const state = {
userId: '',
token: '',
name: '',
avatar: '',
introduction: '',
roles: [],
tenantId: 1,
userInfo: null};
mutations データを同期的に送信するmutations は、状態の状態ロジックを変更し、状態の状態データを同期的に変更するために使用されます。 知っておくべきことは、状態オブジェクトは vuex のミューテーションを通じてのみ変更できるということです。
アクションから取得したデータを取得することで状態を変更することも、変更するミューテーション モジュールでメソッドを直接定義することもできます状態データ。const mutations = {
SET_TOKEN: (state, token) => {
state.token = token;
},
SET_USERID: (state, userId) => {
state.userId = userId;
},
SET_NAME: (state, name) => {
state.name = name;
},
SET_ROLES: (state, roles) => {
state.roles = roles;
},
SET_TENANTID: (state, roles) => {
state.tenantId = roles;
},
SET_USER_INFO: (state, userInfo) => {
state.userInfo = userInfo;
}};以下のミューテーションとアクション モジュールを通じて、コミットがミューテーション モジュールの呼び出しに使用されていることもわかります。
コンポーネント内でその突然変異モジュールを呼び出すコードは次のとおりです:
this.$store.commit('SET_TOKEN', token_data)
アクションの非同期操作
とミューテーションの違いは、
アクションは状態を直接変更するのではなく、ミューテーションを送信することです。 アクションには、任意の非同期操作を含めることができます。コンポーネント内のこのアクションの呼び出しメソッドは次のとおりです:
- 例:
/* 下面就是通过actions执行异步Ajax请求， 得到数据后， 通过commit的方法调用mutations 从而更新数据 例如： commit('SET_TOKEN', data.uuid); */const actions = { login({ commit }, userInfo) { // 用户登录 const params = userInfo; params.userName = userInfo.userName.trim() return new Promise((resolve, reject) => { getLogin(params) .then((response) => { const { status, message, data } = response || {}; if (status === 200) { // 存入 参数： 1.调用的值 2.所要存入的数据 commit('SET_USER_INFO', data); commit('SET_TOKEN', data.uuid); commit('SET_USERID', data.id); commit('SET_ROLES', data.roles); commit('SET_NAME', data.realName); commit('SET_TENANTID', data.tenantId || 1); setToken(data.uuid); db.save('userInfo', data); db.save('tenantId', data.tenantId || 1); localStorage.setItem('loginToken', data.uuid); resolve(data); } else { // ElementUI.Message.error(message); // axios拦截统一提示了 } }) .catch((error) => { // ElementUI.Message.error(error.message); // axios拦截统一提示了 reject(error); }); }); },}
this.$store.dispatch('user/login', postUser)
.then(res => {
// .............
})// 我这里的login方法写在了user.js这个module里 所以这里调用是 user/login// 下面会讲到moduleGetters は状態を処理します
Getters計算されたプロパティについては、状態データの処理に使用されます。デフォルト パラメータが 2 つあります。最初のデフォルト パラメータは state で、2 番目のデフォルト パラメータはゲッターです。
const getters={
plusCount(state){
return state.count + 1
},
//获取state中状态数据对象，和获取getters模块中plusCount数据
totalCount(state,getters){
return getters.plusCount + state.count }}コンポーネントでこのメソッドを呼び出すためのコード スニペットは次のとおりです:
this.$store.getters.totalCount()
Vue コンポーネントで Vuex ステータスを取得します
ストアから読み取ります
インスタンス 状態を取得する最も簡単な方法は、計算されたプロパティで特定の状態を返すことです。Vuex
の状態ストレージは応答性があるため、ここでstore.state.count が変更されるたびに、計算された属性が再計算され、応答して更新されます。
computed: {
count: function(){
return this.$store.state.count }
},
那么对于以上的store我们就简单介绍完了，相信大家看完后对于vuex会有一定的理解。那么这个时候我们要想，是不是使用this.$store.state或this.$store.getters.xxx感到麻烦呢？下面我们介绍另一种引入state和getters的方式
辅助函数 mapState 和 mapGetters
对于上述的在组件中引用state和getters的方法是不是感到麻烦呢？使用mapState你将会感受到便利。
组件中这样使用
//首先我们需要先将辅助函数引入import { mapGetters,mapState } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters( ['plusCount','totalCount'] )
// 使用对象展开运算符将 state 混入 computed 对象中
...mapState( ['userInfo','count'] )
},methods:{
getData(){
// 这里就能直接使用了 直接使用state 和getters里的数据
// this.userInfo
// this.plusCount
}}}Module子模块化管理
store文件夹下的index.js代码如下
import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)const modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules}, {})const store = new Vuex.Store({
modules,
getters})export default store文件目录如图
举例 api.js
import { getKey, getLogin, logout, getInfo } from '@/api/user';import { setToken, removeToken } from '@/utils/auth';import db from '@/utils/localstorage';import router, { resetRouter } from '@/router';import ElementUI from 'element-ui';const state = {
userId: '',
token: '',
name: '',
avatar: '',
introduction: '',
roles: [],
tenantId: 1,
userInfo: null
// roles: ['9999']};const mutations = {
SET_TOKEN: (state, token) => {
state.token = token;
},
SET_USERID: (state, userId) => {
state.userId = userId;
},
SET_NAME: (state, name) => {
state.name = name;
},
SET_ROLES: (state, roles) => {
state.roles = roles;
},
SET_TENANTID: (state, roles) => {
state.tenantId = roles;
},
SET_USER_INFO: (state, userInfo) => {
state.userInfo = userInfo;
}};const actions = {
// 获取密钥
getKey({ commit }) {
return new Promise((resolve, reject) => {
getKey()
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error);
});
});
},
// 用户登录
login({ commit }, userInfo) {
// const { username, password } = userInfo;
const params = userInfo;
params.userName = userInfo.userName.trim()
return new Promise((resolve, reject) => {
// console.log(username, password);
// setToken(state.token)
// localStorage.setItem('loginToken', state.token)
getLogin(params)
// getLogin({ userName: username.trim(), password: password })
.then((response) => {
const { status, message, data } = response || {};
if (status === 200) {
// 存入 参数： 1.调用的值 2.所要存入的数据
commit('SET_USER_INFO', data);
commit('SET_TOKEN', data.uuid);
commit('SET_USERID', data.id);
commit('SET_ROLES', data.roles);
commit('SET_NAME', data.realName);
commit('SET_TENANTID', data.tenantId || 1);
setToken(data.uuid);
db.save('userInfo', data);
db.save('tenantId', data.tenantId || 1);
localStorage.setItem('loginToken', data.uuid);
resolve(data);
} else {
// ElementUI.Message.error(message); // axios拦截统一提示了
}
})
.catch((error) => {
// ElementUI.Message.error(error.message); // axios拦截统一提示了
reject(error);
});
});
},
// 获取用户信息
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token)
.then((response) => {
const { data } = response;
data.roles = response.data.rights.map(String);
if (!data) {
reject('验证失败，请重新登录。');
}
const loginMessage = {
memberId: data.id,
userName: data.name,
userTel: data.mobile,
realName: data.realName,
incorCom: data.incorCom,
virtualCor: data.virtualCor,
deptId: data.deptId,
deptpath: data.deptpath,
deptName: data.deptName };
localStorage.setItem('loginMessage', JSON.stringify(loginMessage));
const { id, roles, realName } = data;
// 角色必须是非空数组!
if (!roles || roles.length <= 0) {
reject('getInfo: 角色必须是非空数组!');
}
commit('SET_USERID', id);
commit('SET_ROLES', roles);
commit('SET_NAME', realName);
localStorage.setItem('userRights', roles);
// commit('SET_AVATAR', avatar)
// commit('SET_INTRODUCTION', introduction)
resolve(data);
})
.catch((error) => {
reject(error);
});
});
},
// 用户登出
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token)
.then(() => {
commit('SET_TOKEN', '');
commit('SET_ROLES', []);
db.remove('router');
removeToken();
resetRouter();
resolve();
})
.catch((error) => {
reject(error);
});
});
},
// 删除token
resetToken({ commit }) {
return new Promise((resolve) => {
commit('SET_TOKEN', '');
commit('SET_ROLES', []);
removeToken();
resolve();
});
},
// 动态修改权限
changeRoles({ commit, dispatch }, role) {
return new Promise(async(resolve) => {
const token = role + '-token';
commit('SET_TOKEN', token);
setToken(token);
const { roles } = await dispatch('getInfo');
console.log(roles, 'rolesrolesroles');
resetRouter();
// 根据角色生成可访问路由映射
const accessRoutes = await dispatch('permission/generateRoutes', roles, {
root: true
});
// 动态添加可访问路由
router.addRoutes(accessRoutes);
// 重置已访问视图和缓存视图
dispatch('tagsView/delAllViews', null, { root: true });
resolve();
});
}};export default {
namespaced: true,
state,
mutations,
actions};这样后可以按功能分module使用
页面中调用就是
// 使用mutationsthis.$store.commit('api/SET_T', keys);// 使用actionsthis.$store.dispatch('user/login', postUser).then(res => {}）// 如果没有分module // 那就是 this.$store.commit('SET_T', keys);// 直接调用方法写完自己也感觉好简单噢(⊙-⊙)
不明白的童鞋在评论区留言咯 ヾ(•ω•`)o
以上がわかりやすい！ VUEX 状態倉庫管理の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjianshu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。