宁夏快速自助制作网站,网页工具大全,莱芜十大首富,互联国际网站Vue 2.0 中的 Vuex Store 状态管理器核心概念和组成部分
State#xff08;状态#xff09;#xff1a; Vuex Store 的核心就是集中式存储应用的所有组件的状态。它是一个单一状态树#xff0c;所有的组件都从这个状态树中读取数据并可以响应状态的变化。
const state {c…Vue 2.0 中的 Vuex Store 状态管理器核心概念和组成部分
State状态 Vuex Store 的核心就是集中式存储应用的所有组件的状态。它是一个单一状态树所有的组件都从这个状态树中读取数据并可以响应状态的变化。
const state {count: 0,user: null,// 更多的状态...
}Getters获取器 类似于 Vue 组件中的计算属性Getters 接受 State 作为输入并返回处理过的状态数据。它们允许你定义从 State 派生出的新状态且当 State 改变时自动更新。
const getters {formattedCount: state Count is ${state.count},loggedInUser: state state.user state.user.loggedIn ? state.user : null,// 更多的获取器...
}Mutations突变) 修改 Vuex Store 中的状态的唯一方式是通过提交 mutation。每个 mutation 都是一个纯函数接受 State 作为第一个参数并接收 payload 作为额外参数来修改 State。
const mutations {increment(state) {state.count;},setUser(state, user) {state.user user;},// 更多的突变...
}Actions动作 Actions 是用于触发 mutations 并包含异步操作的地方。它们通常用来执行异步逻辑如 AJAX 请求并在完成后提交 mutation 来改变 State。某些情况下可能需要通过异步操作来设置某个store状态这时可以创建一个action来处理整个过程并在成功后调用mutation更新状态。
const actions {async incrementAsync({ commit }) {setTimeout(() {commit(increment);}, 1000);},fetchUser({ commit }) {return axios.get(/api/user).then(response {commit(setUser, response.data);});},// 更多的动作...
}Modules模块 在大型应用中Store 可以被细分为多个模块每个模块拥有自己的 State、Getters、Mutations 和 Actions。这样有助于组织代码使得状态管理更加清晰和可维护。
// example module
const userModule {state: { ... },getters: { ... },mutations: { ... },actions: { ... },
}export default new Vuex.Store({modules: {user: userModule,// 其他模块...}
})完整应用示例 文件结构 store/modules/…被细分的模块 store/index.js总和被细分的模块 store/getters.js接受 State 作为输入并返回处理过的状态数据 State 改变时自动更新。 main.js:引入store并应用到vue 以细分模块user.js为例 1user.js
import { login, logout } from /api/login /* 自己封装的登录退出请求*/
import { getToken, setToken, removeToken } from /utils/auth /*cookie管理token文件*/
const user {state: {token: getToken(),userName: localStorage.getItem(userName)||,//用户名permissions: [],isRouter:true,isLargeScreen:JSON.parse(localStorage.getItem(isLargeScreen)||true),//全屏显示驾驶舱},mutations: {SET_TOKEN: (state, token) {state.token token},USER_NAME: (state, userName) {state.userName userName},SET_PERMISSIONS: (state, permissions) {state.permissions permissions},IS_ROUTER: (state, isRouter) {state.isRouter isRouter},IS_LargeScreen(state, isLargeScreen){state.isLargeScreen isLargeScreen},changeStateMutations1(state, data) {//data:{key:需要修改的名data修改的内容}state[data.key] data.data;if (typeof(state[data.key]) ! undefined) {return true;} else {return false;}},system_ID:(state, systemId){state.systemId systemId},IS_System:(state, isSystem){state.isSystem isSystem}},actions: {setSuperAdminType({ commit, state }, view) {return new Promise(resolve {resolve([...state.superAdminType])})},// 登录Login({ commit }, userInfo) {const username userInfo.username.trim()const password userInfo.passwordreturn new Promise((resolve, reject) {login(username, password).then(res {//console.log(res.isAiAdmin,登录返回值);setToken(res.content.token)commit(SET_TOKEN, res.content.token)//用户名localStorage.setItem(userName,res.content.userName)commit(USER_NAME, res.content.userName)resolve()}).catch(error {reject(error)})})},// 退出系统LogOut({ commit, state }) {return new Promise((resolve, reject) {logout({token:state.token}).then(() {commit(SET_TOKEN, )commit(USER_NAME, [])removeToken()resolve()}).catch(error {reject(error)})})},// 前端 登出FedLogOut({ commit }) {return new Promise(resolve {commit(SET_TOKEN, )removeToken()resolve()})},//修改数据changeStateData(context, data) {//data:{key:需要修改的名data修改的内容}context.commit(changeStateMutations1, data)},}
}export default user
2/utils/auth机制跟localstorage类似可以不用该文件
import Cookies from js-cookieconst TokenKey Admin-cms-Tokenexport function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}3getters.js
const getters {sidebar: state state.app.sidebar,size: state state.app.size,device: state state.app.device,visitedViews: state state.tagsView.visitedViews,cachedViews: state state.tagsView.cachedViews,token: state state.user.token,avatar: state state.user.avatar,userName: state state.user.userName,introduction: state state.user.introduction,permissions: state state.user.permissions,permission_routes: state state.permission.routes,topbarRouters:state state.permission.topbarRouters,defaultRoutes:state state.permission.defaultRoutes,sidebarRouters:state state.permission.sidebarRouters,isRouter: state state.user.isRouter,isLargeScreen:state state.user.isLargeScreen,}
export default getters(4)index.js
import Vue from vue
import Vuex from vuex
import app from ./modules/app
import user from ./modules/user
import tagsView from ./modules/tagsView
import permission from ./modules/permission
import settings from ./modules/settings
import getters from ./gettersVue.use(Vuex)const store new Vuex.Store({modules: {app,user,tagsView,permission,settings},getters
})
export default store(5)main.js中引入store并运用到vue上
import Vue from vueimport Cookies from js-cookieimport Element from element-ui
import ./assets/styles/element-variables.scssimport /assets/styles/index.scss // global css
import /assets/styles/ruoyi.scss // ruoyi css
import ./assets/icons
import Common from /utils/common.js;import App from ./App
import store from ./store
import router from ./router
import directive from ./directive // directive
import plugins from ./plugins // pluginsimport ./permission // permission control
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from /utils/ruoyi;
// 分页组件
import Pagination from /components/Pagination;
//右上角菜单
import TopMenu from /components/topMenu;
// 自定义表格工具组件
import RightToolbar from /components/RightToolbar
// 分页组件
import newInput from /components/newInput;// 头部标签组件
import VueMeta from vue-meta// 全局方法挂载
Vue.prototype.parseTime parseTime
Vue.prototype.resetForm resetForm
Vue.prototype.addDateRange addDateRange
Vue.prototype.selectDictLabel selectDictLabel
Vue.prototype.selectDictLabels selectDictLabels
Vue.prototype.handleTree handleTree// 全局组件挂载
Vue.component(Pagination, Pagination)
Vue.component(RightToolbar, RightToolbar)
Vue.component(newInput, newInput)
Vue.component(TopMenu, TopMenu)Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
Vue.use(Common)Vue.use(Element, {size: Cookies.get(size) || medium // set element-ui default size
})Vue.config.productionTip falsenew Vue({el: #app,router,store,render: h h(App)
})
