vue爬坑记:初学vuex(一)

关注

原创最新推荐文章于 2026-04-23 11:10:57 发布 272 阅读 AI 写同款· GEO 优化 ›

前端｜Vue Vuex和Pinia Vue状态管理的双雄较量 Vuex和Pinia的区别 Vuex和Pinia都是Vue生态中非常重要的状态管理解决方案。Vuex凭借其官方背书和历史悠久的社区支持，适合需要复杂状态管理的大型项目。而Pinia则以其现代化的设计和开发体验吸引了许多Vue开发者，特别是对于新项目或寻求更简单状态管理方法的开发者来说。项目规模和复杂性团队对TypeScript的偏好现有项目是否已经使用了Vuex对状态管理的个人偏好无论选择哪一个，重要的是理解它们的核心概念和实现方式，以便能够有效地管理和维护应用程序的状态。阅读详情

安装vuex

npm install vuex --save

src目录下新建vuex文件夹,新建store.js

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)


const state = {
    count: 5
}

const mutations = {
    add(state) {
        state.count++
    },
    reduce(state) {
        state.count--
    }
}
export default new Vuex.Store({
    state,mutations
})

components文件夹下新建count.vue文件

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr />
        <h3>{{$store.state.count}}</h3> 
        <h3>{{count}}</h3> 
        <div>
            <button @click="$store.commit('add')">+</button>    
            <button @click="$store.commit('reduce')">-</button>    
        </div> 
    </div>
</template>
<script>
import store from "@/vuex/store";
import { mapState } from "vuex";
export default {
  data() {
    return {
      msg: "hello Vuex"
    };
  },
  computed: mapState(["count"]),
  //   computed:{
  //       count(){
  //           return this.$store.state.count;
  //       }
  //   },
  store
};
</script>

router文件夹下修改index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Count from '@/components/count'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/count',
      name: 'Count',
      component: Count
    }
  ]
})