vue3-vuex的使用

 vue3中vuex是怎么配置呢?
 1.下载
npm install vuex@next 
2.创建store文件夹并添加index.js
import {
    
    createStore} from "vuex";  
const store = createStore({
    
    
		state() {
    
    
        return {
    
    
            storeCount:  1
        }
    },
      getters: {
    
    
        double(state) {
    
    
            return state.storeCount * 2
        }
    },
    mutations: {
    
    
        add(state, plyLoad) {
    
    
            state.storeCount += plyLoad
        }
    },
    actions: {
    
    
        asyncAdd({
     
     commit}, playLoad) {
    
    
        	// 模拟网路数据
            setTimeout(() => {
    
    
                commit('add', playLoad)
            }, 1000)
        }
    }
})
export default store;  //暴露store对象
3.来到main.js  --- createApp 和以前 一样
import store from "./store";
createApp(App).use(store).mount('#app');
4.来到你自己页面
<script setup>
	import {
    
    useStore} from "vuex"
	let store =  useStore();
	// 获取strore中的值
	let storeCount = computed(() => store.state.storeCount);
	// 同步修改
	function modifyStoreData() {
    
    
	  store.commit('add', 5);
	}
	// 异步修改  需要dispatch
	function modifyAsyncStoreData() {
    
    
	  store.dispatch('asyncAdd', 1);
	}
</script>

猜你喜欢

转载自blog.csdn.net/weixin_45932463/article/details/121363139