欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > vue >内容正文

vue

vue怎么引入js文件_Vue核心知识:8.3 vuex在vue-cli中的应用,文件之间的导出与引入...

发布时间:2025/3/19 vue 35 豆豆
生活随笔 收集整理的这篇文章主要介绍了 vue怎么引入js文件_Vue核心知识:8.3 vuex在vue-cli中的应用,文件之间的导出与引入... 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

问题:vuex在vue-cli中的应用

第一步:npm下载vuex资源包:

npm install vuex --save

第二步:在 src/main.js 中引入

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)import store from './vuex/store'

第三步:在 src 下 新建 vuex 文件夹

vuex下:* modelus //文件夹,存放不同模块需要的共享状态文件* index.js* 等*store.js *types.js

说明:

vuex文件夹下store.js:

import Vue from 'vue'import Vuex from 'vuex'//引入不同模块需要的共享变量:import index from './modules/index'//使用vuexVue.use(Vuex)//对外暴露export default new Vuex.Store({ modules: { index }})

vuex文件夹下 modelus文件夹下 index.js:

//引入一个常量,保证 action 和 mutations 的统一。import * as types from '../types'/** * App通用配置 */const state = {//vuex初始化值 count : 0}const actions = { increment({ commit }, n){ commit(types.TEST_INCREMENT, n) }, decrement({ commit }, state){ commit(types.TEST_DEREMENT, state) }}const getters = { count: state => state.count}const mutations = { [types.TEST_INCREMENT](state, n) { console.log(n); state.count = state.count + 5 + n }, [types.TEST_DEREMENT](state, status) { state.count = state.count - 3 }}export default { state, actions, getters, mutations}

vuex文件夹下type.js:

//暴露常量export const TEST_INCREMENT='TEST_INCREMENT'export const TEST_DEREMENT='TEST_DEREMENT'

编辑器:

总结

以上是生活随笔为你收集整理的vue怎么引入js文件_Vue核心知识:8.3 vuex在vue-cli中的应用,文件之间的导出与引入...的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。