vuex4.0的食用方法

vuex4.0的安装

npm install vuex@4.0

在vite中使用vuex

//store.js
import {
  createStore
} from 'vuex'
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  state: {
    count: 10
  },
  mutations: {
    addStateCount(state, data) {
      state.count += data
    },
    descStateCount(state, data) {
      state.count -= data
    }
  },
  actions: {
    addStateCount({
      commit
    }, data) {
      commit('addStateCount', data)
    },
    descStateCount({
      commit
    }, data) {
      setTimeout(() => {
        commit('descStateCount', data)
      }, 2000)

    }
  },
  plugins: [createPersistedState()],
})

export default store

vuex-persistedstate是将vuex中的数据进行持久化的一个插件

在组件中使用vuex

<template>
	<h1>store中的数据：{{ store.state.count }}</h1>
	<div>
		<button @click="addStateCount">add</button>  
		<button @click="descStateCount">desc</button>
	</div>
</template>
<script setup>
	import { useStore } from 'vuex'
	
	let store = useStore()
	const state = reactive({ count: 0 })
	const addStateCount = () => {
	  store.dispatch('addStateCount',1)
	}
	const descStateCount = () => {
	  store.dispatch('descStateCount',1)
	}
</script>

<style scoped>
</style>