Vue3 使用vuex 系统常量的两种方法

目录：

方式一：创建store/index.js

方式二：创建store/index.js和store/modules/index.js

安装vuex

# 使用 npm 安装
npm install vuex@next --save

# 或使用 yarn 安装
yarn add vuex@next

# 或使用 pnpm 安装
pnpm add vuex@next
## 

在 main.js 中注册 Vuex

#// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

方式一.创建store/index.js

// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    index: {
      dataObj: {} // 初始数据
    }
  },
  mutations: {
    // 直接设置整个 dataObj
    setDataObj(state, newData) {
      state.index.dataObj = newData
    },
    
    // 或者只修改 dataObj 的某个属性
    updateDataObjProperty(state, { key, value }) {
      state.index.dataObj[key] = value
    }
  },
  actions: {
    // 异步更新
    updateDataObj({ commit }, newData) {
      // 这里可以有异步操作
      commit('setDataObj', newData)
    }
  },
  getters: {
    getDataObj: state => state.index.dataObj
  }
})

第一种：Vue 3 的 < script >语法在index.vue中

import { ref, onMounted, onUnmounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const dataObj = computed(() => {
      return store.state.index.dataObj
    })
    // 或者使用 getter
    // const dataObj = computed(() => store.getters.getDataObj)
	// 点击按钮 重新赋值
	const saveData = () => {
		store.commit('saveDataObj', '2222');
	};
    return {
      dataObj,
      Search
    }
  }
}

第二种：Vue 3 的 < script setup >语法 获取值，赋值

<template>
  <div>
    <p>当前数据: {{ dataObj }}</p>
    <button @click="updateData">更新数据</button>
     <button @click="saveData">赋值数据</button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useStore } from 'vuex'

const store = useStore()
const dataObj = computed(() => store.state.index.dataObj)
// 点击按钮 重新赋值
const saveData = () => {
	store.commit('saveDataObj', '2222');
};

// 读取数据（通过 getter）
const dataObj = computed(() => store.getters.getDataObj)

// 修改数据 - 通过 mutation
const updateData = () => {
  const newData = { name: '新数据', value: '新值' }
  store.commit('setDataObj', newData)
}

// 或者通过 action（如果有异步操作）
const updateDataAsync = () => {
  const newData = { name: '新数据', value: '新值' }
  store.dispatch('updateDataObj', newData)
}
</script>

#// 完全替换 dataObj
store.commit('setDataObj', { 
  id: 1, 
  name: '新名称', 
  items: ['a', 'b', 'c'] 
})
#// 只修改特定属性
store.commit('updateDataObjProperty', { 
  key: 'name', 
  value: '修改后的名称' 
})

#// 添加新属性到 dataObj
store.commit('updateDataObjProperty', { 
  key: 'newField', 
  value: '新字段的值' 
})

二.创建store/index.js和store/modules/index.js

1.store/index.js

import { createStore } from 'vuex';
import index from './modules/index';
 
const store = createStore({
  modules: {
    index
  }
});
 
export default store;

2.store/modules/index.js

const state = {
    dataObj: '123'
};
const mutations = {
  saveDataObj(state, obj) {
    state.dataObj = obj;
  }
}; 
export default {
  state,
  mutations
};

1. 第一种

<template>
	<section class="module">
		<span class="title" @click="saveData">标题{{dataObj}}</span>
	</section>
</template>
<script>
	import {	ref, onMounted, 	computed 	} from 'vue';
	import {	useStore } from 'vuex';
	export default {
		setup() {
			const store = useStore();
			const dataObj= computed(() => {
				 return store.state.index.dataObj;	 
			});
			// 点击按钮 更改从store获取的数据
			const saveData = () => {
			 	store.commit('saveDataObj', '2222');
			};
         return {
				saveData 
				dataObj
			};
		}
	};
</script>

2. 第二种

<script>
	
	import {useStore} from 'vuex';
	export default {
		data() {
			return {
				dataObj:'',
			};
		},
		computed:{
			key(){
				this.dataObj= this.$store.state.index.dataObj;
			}
		},

		methods: {
			handleLogin(type) {
			 	console.log("dataObj",this.dataObj)			
			},	
		}
	};
</script>