vuex store
2021/9/10 23:35:22
本文主要是介绍vuex store,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
index.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { createStore } from 'vuex' const store = createStore({ // strict:true, // strict:process.env.NODE_NEV !== 'production', // 全局共享的状态(数据)存放 state: { counter : 0 }, getters: { }, // 同步提交状态 mutations: { //加1 INCREMENT(state){ state.counter++; }, //减1 DECREMENT(state){ state.counter--; }, //加2 INCREMENT2(state,num){ setTimeout(()=>{ state.counter+=num; },2000) // state.counter+=num; }, }, // 提交操作(可以是同步也可以是异步)给mutations actions: { //加1 increment({commit}){ commit('INCREMENT'); }, //减1 decrement({commit}){ commit('DECREMENT'); }, //加2 increment2({commit}){ commit('INCREMENT2'); // setTimeout(()=>{ // commit('INCREMENT2'); // },2000) }, }, modules: { } }); export default store |
about.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | < template > < div class = "about" > < h1 >This is an about page</ h1 > < h2 >{{$store.state.counter}}</ h2 > < button @ click = "add" >++</ button > < button @ click = "sub" >--</ button > < button @ click = "add2(100)" >+++</ button > </ div > </ template > < script > import {useStore} from 'vuex'; export default { setup(){ const store = useStore(); const add = ()=>{ store.dispatch('increment'); // store.commit('INCREMENT'); } const sub = ()=>{ store.dispatch('decrement'); // store.commit('DECREMENT'); } const add2 = (num)=>{ // store.dispatch('increment2',num); store.commit('INCREMENT2',num); } return{ add, add2, sub } } } </ script > |
main.ts
1 2 3 4 5 6 | import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(store).use(router).mount('#app') |
.eslintrc.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', // '@vue/standard', '@vue/typescript/recommended' ], parserOptions: { ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } } |
这篇关于vuex store的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
原文链接: https://www.cnblogs.com/mingforyou/p/15253387.html
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南