utilisation partagée de vuex

Installez vuex séparément : npm i vuex

Créez un entrepôt de magasin et créez un module index.js (store/index.js)

import Vue from 'vue'                //引入核心库
import Vuex from 'vuex'             //引入vuex 核心插件
Vue.use(Vuex)              //调用vuex插件


//情景1:
import state from './state';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import mo1 from '../store/modules/mo1';
import mo2 from '../store/modules/mo2';
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
  modules: {
    mo1,mo2
  }
})


//情景2(modules文件夹里有很多的文件，这里多了一个方法取出里面的modules模块文件）：
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

Vuex (y compris la bibliothèque de magasin et la fonction de mappage) ===>

nouvel objet d'instance Vuex.Store ====》

 Scénario 1 : Scénario 2 :

 

 

Créez un seul fichier d'entrepôt js sous les modules (store/modules/mo1.js)

 Les modules résolvent le problème des données d'état gonflées et découpent l'entrepôt en différents modules

const state = {
  title: title
}

const mutations = {
  CHANGE_SETTING: (state, data) => {
    state.title=data
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

const getters ={
   getTitle:state=>state.title
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

Injectez le module d'entrepôt encapsulé  dans l'instance vue (main.js)

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

Fonctions auxiliaires (fonctions de mappage) - réduisent la quantité de code + espace de noms - augmentent la lisibilité

Parce que Vuex (y compris la bibliothèque de magasin et la fonction de mappage) : import { mapGetters, mapState } from 'vuex'

Étant donné que la fonction de mappage elle-même est une fonction, le titre peut être utilisé directement après...mapState([ 'title', ])

基础使用：
//因为store已经挂载到了vue上，所以可以直接使用this.$store
this.$store.state.title
this.$store.getters.getTitle
this.$store.mutation('type',data)
this.$store.dispatch('type',data)

命名空间+辅助性函数
<template>
 <div>
    mapState---- {
   
   {name}}
    mapGetters ----{
   
   {getName}}
    ----------{
   
   {this.$store.getters['mo1/getName']}}
 </div>
</template>

 import { mapGetters,mapState,mapActions } from 'vuex'

 computed:{
//使用命名空间，这种只能使用对象方式重新命名，mo1是某个modules的模块js文件（mpaState不能使用这种）
    //未使用辅助函数+命名空间
    this.$store.getters['mo1/getName']
    // 【辅助函数+命名空间方式一】获取store中的数据（代码更简洁）
    ...mapState(['name']),
    ...mapState({ proData: state => state.productModule.proData }),
    ...mapGetters(['getName','themeModule/themeData'])
    
    // 【辅助函数+命名空间方式二】获取store中的数据（代码最简洁）
    // 将模块的空间名称字符串作为第一个参数传递给辅助函数，这样所有绑定都会自动将该模块作为上下文。
    ...mapState('mo1', { proData: state => state.proData }),
    ...mapGetters('mo1', ['getName','themeData']),



     ...mapGetters({getName: 'mo1/getName'})   

 }，
created(){
    this.titleFun(data);
    this.fun(data)
},
methods:{
    //未使用辅助函数+命名空间
       fun(data){
        this.$store.dispatch('mo1/titleFun', data)
    }

     // 【辅助函数+命名空间
    ...mapActions(['titleFun',data]);
    ...mapActions('mo1',['titleFun',data])
}

Espaces de noms

Le module a un degré plus élevé d'encapsulation et de réutilisabilité. L'ajout de namespaced: true en fait un module avec un espace de noms. Lorsqu'un module est enregistré, tous ses getters, actions et mutations seront automatiquement nommés en fonction du chemin enregistré par le module.