vuex store
2021/9/10 23:35:22
本文主要是介绍vuex store,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
index.ts
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
<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
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
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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-21Vue3教程:新手入门与实战指南
- 2024-09-21VueRouter4教程:入门与实践指南
- 2024-09-21Vuex4项目实战:新手入门教程
- 2024-09-21Vue3项目实战:初学者指南
- 2024-09-21Vue3项目实战:从零开始构建你的第一个Vue3应用
- 2024-09-21VueRouter4项目实战入门教程
- 2024-09-21Vue3入门:新手必读指南
- 2024-09-20Vue3教程:初学者快速入门指南
- 2024-09-20Vue资料入门教程:从零开始学习Vue.js
- 2024-09-20Vuex4入门教程:轻松掌握Vue状态管理