网站首页 > 技术文章 正文
问题: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'
//使用vuex
Vue.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'
编辑器:
猜你喜欢
- 2024-09-10 一个基于vite构建的vue3+pinia+ts+element初始化开箱即用的项目
- 2024-09-10 GitHub一篇《Vue 加载远程组件解决方案》,引起业内大佬点评
- 2024-09-10 页面刷新时vuex数据持久化问题的解决方案:第三方插件完美实现
- 2024-09-10 基于vite + Vue3 + element-plus的前后端分离基础项目搭建
- 2024-09-10 Vue导入模块import xxx from '@/xxx'中的@是什么含义?
- 2024-09-10 终于搞懂了!原来 Vue 3 的 generate 是这样生成 render 函数的
- 2024-09-10 Vue3 + TS 中使用 Provide/Inject 需要考虑的三大问题
- 2024-09-10 关于Vue3的setup attribute标识是否是一个值得使用的语法糖?
- 2024-09-10 聊一聊如何在Vue中使用事件总线( Event Bus)进行组件间通信
- 2024-09-10 vite+vue3实现网页版编辑器,带高亮以及代码提
- 最近发表
-
- 聊一下 gRPC 的 C++ 异步编程_grpc 异步流模式
- [原创首发]安全日志管理中心实战(3)——开源NIDS之suricata部署
- 超详细手把手搭建在ubuntu系统的FFmpeg环境
- Nginx运维之路(Docker多段构建新版本并增加第三方模
- 92.1K小星星,一款开源免费的远程桌面,让你告别付费远程控制!
- Go 人脸识别教程_piwigo人脸识别
- 安卓手机安装Termux——搭建移动服务器
- ubuntu 安装开发环境(c/c++ 15)_ubuntu安装c++编译器
- Rust开发环境搭建指南:从安装到镜像配置的零坑实践
- Windows系统安装VirtualBox构造本地Linux开发环境
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (77)
- vector线程安全吗 (73)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)
