vuex如何異步修改狀態,vue 狀態管理vuex(九)

 2023-12-25 阅读 66 评论 0

摘要:通過props 及 $emit在父子組件通訊,對應頻繁更新狀態考慮使用vuex store.js ? export default {// 存儲狀態值 state: {count: 0},// 狀態值的改變方法,操作狀態值// 提交mutations是更改Vuex狀態的唯一方法 mutations: {// 修改state,第一個參數就是state incr

通過props 及 $emit在父子組件通訊,對應頻繁更新狀態考慮使用vuex

store.js

?

export default {// 存儲狀態值
  state: {count: 0},// 狀態值的改變方法,操作狀態值// 提交mutations是更改Vuex狀態的唯一方法
  mutations: {// 修改state,第一個參數就是state
    increment(state) {state.count++}} 
}
....

vuex如何異步修改狀態、?

父組件.vue

<template><div><child :message="changeMsg" @chageMsg="prent"></child><input type="button" value="父傳子" @click="changeMsga"><p>父組件文字:{{fromchildMsg1}}</p><p>count:{{ $store.state.count }}</p><input type="button" value="父組件按鈕Count++" @click="parentEvent"></div></template>
<script>import child from '@/components/Home2'export default {data: function () {return {changeMsg: '1111111',childMsg: '',fromchildMsg1: ''}},methods: {parentEvent: function () {this.$store.commit('increment');},changeMsga: function () {this.changeMsg = '公司'},prent: function (msg) {this.fromchildMsg1 = msg;}},components: {child}}</script>
<style scoped></style>
View Code

子組件.vue

<template><div>獲取值:<span>{{message}}</span><br><input type="button" value="子組件" @click="submitValue"><p>count:{{ $store.state.count }}</p><input type="button" value="子組件按鈕Count++" @click="childEvent"></div>
</template>
<script>export default {data: function () {return {}},props:['message'],methods: {childEvent: function(){this.$store.commit('increment')},submitValue: function(){this.$emit("chageMsg",'222222222222222');}}}</script>
<style scoped></style>
View Code

初始化會看到,比較low的頁面

vue和vuex。

父子組件傳值,箭頭

父子組件狀態更改 ,點擊 (父子組件按鈕)會,發現 父子組件數組都在+1.

刷新頁面vuex數據丟失?

?

?針對刷新,狀態信息無,可以使用本地緩存localstorage

?

vuex更新后不實時?轉載于:https://www.cnblogs.com/congxueda/p/7852930.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/5/194991.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息