vue.js - 为何vuex未被打包进Vue.js的输出文件?

Question

dependencies没有把vuex打包进入

  "dependencies": {    "@tinymce/tinymce-vue": "^3.0.1",    "axios": "^1.4.0",    "clipboard": "^2.0.11",    "dayjs": "^1.11.9",    "element-ui": "^2.15.13",    "fingerprintjs2": "^2.1.4",    "ipify": "^6.0.0",    "live-server": "^1.2.2",    "moment": "^2.29.4",    "moment-timezone": "^0.5.43",    "postcss": "^8.4.27",    "qs": "^6.11.2",    "tinymce": "^5.1.0",    "uuid": "^9.0.0",    "vue": "^2.5.2",    "vue-axios": "^3.5.2",    "vue-puzzle-vcode": "^1.1.10",    "vue-quill-editor": "^3.0.6",    "vue-router": "^3.0.1",    "vuex": "^3.6.2"  },

但是我在本机是可以允许,这代表我引入的imp vuex是可以的,但是打包之后就没有
index.js

import Vue from "vue"import Vuex from "vuex" Vue.use(Vuex);

main.js

import Vue from 'vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'import router from './router'import store from './store'Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  // el: '#app',    // components: { App },  // template: '<App/>'  router,  store,  render: h => h(App)}).$mount('#app')

Answer 1

首先，要明确一点，当你使用诸如 Webpack 这样的模块打包器时，它只会包含你在代码中实际使用到的依赖项。在你的例子中，你已经在你的项目中安装了 vuex，但是在你的代码中并没有任何地方实际使用了 vuex，所以 Webpack 没有把它包含进最终的打包文件中。

为了解决这个问题，你需要在你的代码中实际使用 vuex。这通常是通过在你的组件中调用 this.$store 来完成的。例如，如果你有一个名为 MyComponent 的组件，并且你想从 vuex 中获取一些状态，你可以这样做：

export default {  computed: {    myState() {      return this.$store.state.myState;    }  }}

这样，当你在模板中使用 myState 时，Webpack 就会知道它需要包含 vuex。

另外，你需要在你的 store.js 文件中设置你的状态和 mutations。例如：

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({  state: {    myState: 'initial state'  },  mutations: {    setMyState(state, newState) {      state.myState = newState;    }  }});

然后你就可以在你的组件中通过 this.$store.state.myState 或 this.$store.commit('setMyState', newState) 来访问或修改这个状态了。