vues3中vuex的简单使用的两种方式_vuex usestore-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39536826/article/details/130963298

文章展示了如何在Vue3项目中使用Vuex进行状态管理。首先介绍了将所有状态管理代码集中在store/index.js中的方式，包括定义state、getters、mutations和actions，以及在页面中如何通过useStore和computed属性来访问和修改数据。然后，文章转向了Vuex的模块化写法，演示了如何在不同的模块文件中组织state，并在页面中引用。最后提到了Vuex状态的持久化存储选项，如sessionStorage、localStorage和vue-persistedstate插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提： 安装了vuex

第一种：都写在store/index.js文件中
1、store/index.js如下代码：

import { createStore } from 'vuex'
export default createStore({
  state () {
    return {
      count: 0,
      sum:0
    }
  },
  getters:{
  	total(state){
  		return state.count + state.sum
  	}
  },
  mutations: {
    increment (state,val) {
      state.count = val
    }
  },
  actions: {
    changeBtn(state, val){
      state.sum = val
    }
  }
})

2、vue3页面使用

import { useStore } from 'vuex'
let store =  useStore()
let str = computed(()=>{ store.state.count }) // 获取 state中值 响应值
let alS = computed(()=>{store.getters.total}) // 获取 getters中值 响应值
const btn = ()=>{
  // store.commit('increment', 100) // mutations 更新使用
  store.dispatch('changeBtn', 200) // actions 更新使用
}

==========================================================================================================================================================

第二种：分模块写法
1、 store/index.js如下代码：

import { createStore } from 'vuex'
import user from './modules/home.js'
export default createStore({
	modules:{
		home
	}
})

2、 store/modules/home.js 代码如下

export default {
	state: {
		navList:'list'
    },
}

3、页面使用

import { useStore } from 'vuex'
let store =  useStore()
let str = computed(()=>{ store.state.home.navList}) // 获取 home中state中值 响应值

备注：vuex的持久化存储可使用sessionStorage或者localStorage或者是插件vue-persistedstate