在Vue中實現新增全域性store

2022-03-30 19:00:32

Vue新增全域性store

在命令列中輸入安裝

npm install --save vuex

在main.js檔案中參照

store和在new Vue中宣告store

import store from './store'
store,

在src中建立一個page檔案

在page檔案下建立一個module的js檔案（內容如下）

const state = {
HomeStatus:{
LoginStatus:false
},
Users:[],
}
const mutations = {
['setuseinfo'] (state, data) {
},
}
const actions = {
}

在src下建立一個store檔案

在store檔案下建立一個index的js檔案

import Vue from 'vue'
import Vuex from 'vuex'
import page from '../page/module'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
modules:{
page
}
})

store使用方法講解

vuex 包含有五個基本的物件

state：儲存狀態。也就是變數；
getters：派生狀態。也就是set、get中的get，有兩個可選引數：state、getters分別可以獲取state中的變數和其他的getters。外部呼叫方式：store.getters.personInfo()。就和vue的computed差不多；
mutations：提交狀態修改。也就是set、get中的set，這是vuex中唯一修改state的方式，但不支援非同步操作。第一個引數預設是state。外部呼叫方式：store.commit(‘SET_AGE’, 18)。和vue中的methods類似。
actions：和mutations類似。不過actions支援非同步操作。第一個引數預設是和store具有相同引數屬性的物件。外部呼叫方式：store.dispatch(‘nameAsyn’)。this.$store.dispatch(‘user/login’, this.loginForm)
modules：store的子模組，內容就相當於是store的一個範例。呼叫方式和前面介紹的相似，只是要加上當前子模組名，如：store.a.getters.xxx()。

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import getters from './getters'
import mutations from './mutations.js'
import actions from './actions.js'
//安裝Vue Devtools偵錯工具https://blog.csdn.net/li22356/article/details/113092495
//掛載Vuex,幫助手冊https://www.jianshu.com/p/2e5973fe1223
//模組化可參考https://www.jb51.net/article/150752.htm
Vue.use(Vuex);
//建立VueX物件,單頁面使用<h1>{{ $store.state.name }}</h1>console.log(this.$store.state.name)
//新增state物件Vue.set(state,"age",15)，刪除Vue.delete(state,'age')
const store = new Vuex.Store({
  //存放資料,存放狀態
  //使用方法
  state,
  //加工state成員給外界
  //state 當前VueX物件中的狀態物件
  // getters 當前getters物件，用於將getters下的其他getter拿來用
  //元件使用this.$store.getters.fullInfo
  getters,
  //state成員操作,操作state資料的方法的集合，比如對該資料的修改、增加、刪除等等。
  //元件呼叫this.$store.commit('SET_TOKEN','new token')掛載方法
  //同步處理
  mutations,
  //非同步處理
  //元件中使用this.$store.dispatch('aEdit','new TOKEN')
  actions
});
export default () => {
  return store
}

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    //這裡放全域性引數，比如使用者登入資訊
  state: {
	token: "helloVueX",
    name: "",
    age: ""
  },
  mutations: {
    //這裡是set方法，比如對該資料的修改、增加、刪除等等。
    //元件呼叫this.$store.commit('SET_TOKEN','new token')掛載方法
    SET_TOKEN: (state, token) => {
	    state.token = token
	    console.log(state.token);
	  }
  },
  //getters 當前getters物件（可對物件進行二次更改），用於將getters下的其他getter拿來用,元件通過this.$store.getters.fullInfo拿來使用
 getters: { 
	 token: state => state.token,
	  nameInfo(state) {
	    return "姓名:" + state.name
	  },
	  fullInfo(state, getters) {
	    return getters.nameInfo + '年齡:' + state.age
	  }
 },
 //非同步處理
//元件中使用this.$store.dispatch('aEdit','new TOKEN')
  actions: {
	   QQlogin({commit}, token) {
	    return new Promise((resolve, reject) => {
	      setToken(token);         //把token存放到cookie裡
	      commit('SET_TOKEN', token)     //commit呼叫mutations 資料
	      resolve()
	    })
	  },
	  aEdit(context, payload) {
	    return new Promise((resolve, reject) => {
	      setTimeout(() => {
	        context.commit('SET_TOKEN', payload)
	        resolve()
	      }, 2000)
	    })
	  }
  },
  modules: {
//這裡是我自己理解的是為了給全域性變數分組，所以需要寫提前宣告其他store檔案，然後引入這裡
  }
})

vuex，module間的方法呼叫

我們用vuex時通常會分功能建立多的module，單個module裡的操作大家應該很清楚，那多個module之間怎麼呼叫了？

詳細程式碼：

現在我有兩個module：user 和 menu,要在user中呼叫menu的actions方法，操作如下：

const user = {
  state: {
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    }
  },
  actions: {
    getPermissions({commit}) {
      queryPermissions().then(res => {
        sessionStorage.setItem('permissions', JSON.stringify(res))
        this.dispatch('setPermissions', res); // 調本module裡的方法
      })
    },
    setPermissions({commit, dispatch, state, rootState}, data) {
      commit('SET_PERMISSIONS', data); // 本module的commit
      dispatch('setMenuData', data); // 調menu裡的方法
      console.log(rootState.menu.menus); // 取menu裡的引數
    }
  }
}
 
export default user
const menu = {
  state: {
    menus: []
  },
  mutations: {
    SET_MENUS: (state, data) => {
      state.menus = data
    }
  },
  actions: {
    setMenuData({commit, state}, data) {
      commit('SET_MENUS', data);
    }
  }
}
export default menu

解釋：

actions裡各個方法的第一個引數其實有很多屬性，只是我們平時習慣瞭解構的寫法，如setMenuData({commit, state},data)。當把第一個引數的值全輸出，如setMenuData(param,data)，輸出param會發現其中包含以下屬性：

vue檔案呼叫store的action方法

const actions = {
    // 根據許可權動態生成路由
    async generateRoutes({ commit }) {
      // 執行程式碼
    }
}

created() {
        this.generateRoutes()
    },
methods: {
        ...mapActions('menu', [
            'generateRoutes'
        ])
        }

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。