Mudah faham! Penjelasan terperinci tentang pengurusan gudang negeri VUEX

Vuex ialah corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue.js. Ia menggunakan storan terpusat untuk mengurus status semua komponen aplikasi dan menggunakan peraturan yang sepadan untuk memastikan status berubah dengan cara yang boleh diramal. Secara ringkasnya: apabila aplikasi menghadapi keadaan perkongsian berbilang komponen, gunakan vuex.

VueX ialah rangka kerja pengurusan keadaan yang direka khas untuk aplikasi Vue.js, yang mengurus dan mengekalkan keadaan berubah secara seragam bagi setiap komponen vue

Senario: berbilang komponen berkongsi data atau menghantarnya merentas komponen Data

Lima konsep teras vuex:

• Nyatakan: keadaan kongsi, data asas vuex, digunakan untuk menyimpan pembolehubah, bersamaan dengan data dalam data komponen, kecuali ini menjadi pembolehubah global.
• Getter: Keadaan terbitan berdasarkan keadaan, bersamaan dengan sifat yang dikira dalam komponen.
• Mutasi: Kaedah untuk menukar keadaan kedai dalam vuex Ubah suai keadaan dengan menyerahkan mutasi dan mengendalikan data secara serentak Ia biasanya digunakan untuk tindakan mendapatkan data tidak segerak mutasi melalui komit, dan mengendalikan data mutasi dalam keadaan.
• tindakan: Menyokong operasi tak segerak, yang boleh digunakan untuk mendapatkan data dalam permintaan secara tak segerak dan menyerahkan data yang diperoleh kepada mutasi secara serentak untuk melaksanakan permintaan tak segerak ajax untuk data, dan mutasi akan menyegerakkan datanya untuk dinyatakan.
• Modul: Modular vuex, untuk memudahkan pengurusan projek kemudian, setiap modul boleh mempunyai keadaan, mutasi, tindakan, getter sendiri, menjadikan strukturnya sangat jelas dan mudah untuk diurus.

Apakah kelebihan dan kekurangannya?
Kelebihan utamanya ialah ia boleh berkongsi data dan kaedah secara global. Mudah untuk pengurusan bersatu
Kelemahan: pembolehubah keadaan akan dipulihkan dan dikosongkan selepas muat semula halaman, dan tidak akan disimpan secara berterusan seperti kuki

Bagaimana untuk menyelesaikan masalah kehilangan data keadaan vuex selepas muat semula halaman?
Beritahu saya dahulu mengapa ia hilang?
Oleh kerana data dalam stor disimpan dalam memori yang sedang berjalan, apabila halaman dimuat semula, halaman akan memuatkan semula contoh vue dan data dalam stor akan ditugaskan semula

Bagaimana untuk mengelakkannya?
Malah, ia bergantung terutamanya pada senario penggunaan Jika anda ingin mengekalkan data tertentu secara berterusan, anda juga boleh menggunakan kuki atau localStorage. Contohnya, beberapa maklumat log masuk, dsb.
Sebagai contoh, selepas meminta maklumat log masuk, anda boleh menyimpannya dahulu dalam localStorage, mengikat nilai pembolehubah dalam keadaan kepada nilai dalam sessionStorage dan mengubah suai keadaan dan localStorage pada masa yang sama apabila mengubah suai mutasi. Halaman akhir menggunakan pembolehubah dalam vuex secara langsung. [Cadangan berkaitan: tutorial video vue.js]

Secara rasmi masukkan pemasangan

vuex
Buka terminal dan masukkan baris arahan npm install vuex - -simpan untuk memuat turun vuex

bangunan gudang pengurusan teras aplikasi vuex

Buat folder kedai baharu di sini, buat js bernama index.js,
dalam indeks, dengan menukar state ,mutations, actions, dan getter diperkenalkan ke dalam ,store dan dedahkan objek store.

Berikut ialah kod 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,})

Lekapkan kedai pada instance vue
Dalam main.js

import store from './store'// ..........new Vue({
  el: '#app',
  router,
  store,   // ***
  render: h => h(App)})

data pengurusan negeri

Kami biasanya meletakkan data kongsi yang perlu diuruskan ke dalam negeri, menjadikannya kelihatan seperti pembolehubah global dan memperkenalkan data keadaan kepada komponen yang diperlukan.

const state = {
  userId: '',
  token: '',
  name: '',
  avatar: '',
  introduction: '',
  roles: [],
  tenantId: 1,
  userInfo: null};

mutasi menyerahkan data secara serentak

mutasi digunakan untuk menukar logik keadaan dalam keadaan dan menukar data keadaan dalam keadaan serentak.
Apa yang anda perlu tahu ialah objek keadaan hanya boleh diubah suai melalui mutasi dalam vuex
Anda boleh mengubah suai keadaan dengan mendapatkan data yang diperoleh daripada tindakan, atau anda boleh menentukan secara langsung kaedah dalam modul mutasi untuk menukar. data negeri.

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;
  }};

Melalui mutasi dan modul tindakan di bawah, anda juga boleh melihat bahawa komit digunakan untuk memanggil modul mutasi.
Kod untuk memanggil modul mutasinya dalam komponen ialah:

this.$store.commit('SET_TOKEN', token_data)

Operasi tindakan tak segerak

tindakan adalah serupa dengan mutasinya, tetapi ia boleh melakukan operasi tak segerak,
dan akan Data yang diperolehi oleh operasi tak segerak diserahkan kepada mutasi, menyebabkan mutasi mengubah data keadaan dalam keadaan Ini sering digunakan untuk mendapatkan data dalam permintaan ajax (kerana ia tidak segerak), dan menyerahkan data yang diperoleh kepada mutasi kepada. mengemas kini status data negeri. Perbezaan antara

dan mutasi ialah:

1. Action menyerahkan mutasi dan bukannya mengubah keadaan secara langsung.
2. Tindakan boleh mengandungi sebarang operasi tak segerak.

Contohnya

/* 下面就是通过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);
        });
    });
  },}

Kaedah memanggil tindakan ini dalam komponen ialah:

 this.$store.dispatch('user/login', postUser)
            .then(res => {
               // .............
              })// 我这里的login方法写在了user.js这个module里 所以这里调用是 user/login// 下面会讲到module

Getters memproses keadaan

Getter adalah bersamaan dengan sifat yang dikira, yang digunakan untuk memproses data keadaan Mereka mempunyai dua parameter lalai Parameter lalai pertama ialah keadaan, dan parameter lalai kedua ialah getter.

const getters={
  plusCount(state){
    return state.count + 1
  },
 //获取state中状态数据对象，和获取getters模块中plusCount数据
  totalCount(state,getters){
    return getters.plusCount + state.count  }}

Coretan kod untuk memanggil kaedah ini dalam komponen ialah:

this.$store.getters.totalCount()

Dapatkan keadaan Vuex dalam komponen Vue

Baca daripada store instance Cara paling mudah untuk mendapatkan keadaan ialah mengembalikan keadaan tertentu dalam atribut yang dikira Memandangkan storan keadaan Vuex adalah responsif, apabila store.state.count berubah di sini, atribut yang dikira akan diperoleh semula dan dikemas kini secara responsif.

 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

Atas ialah kandungan terperinci Mudah faham! Penjelasan terperinci tentang pengurusan gudang negeri VUEX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!