如何在UniApp 中使用Vuex
簡介
Vuex 是狀態管理工具,它允許你在Vue.js 應用程式中集中管理應用程序的狀態和邏輯。 UniApp 作為一款跨平台開發框架,也支援使用 Vuex。
安裝Vuex
首先,使用下列指令安裝Vuex 依賴:
<code class="bash">npm install vuex --save</code>
或
<code class="bash">yarn add vuex</code>
建立Vuex 儲存
接下來,建立一個Vuex 存儲,它將包含應用程式的狀態和邏輯。
<code class="javascript">// store/index.js import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount (state) { return state.count } } }) export default store</code>
在元件中使用 Vuex
要從元件中存取 Vuex 存儲,可以使用 this.$store
。
<code class="javascript">// App.vue <template> <div>{{ this.$store.state.count }}</div> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </template> <script> import { mapActions } from 'vuex' export default { methods: { ...mapActions([ 'increment', 'incrementAsync' ]) } } </script></code>
模組化 Vuex 儲存
對於大型應用程序,將 Vuex 儲存拆分為多個模組很有用。每個模組都可以管理自己的狀態和邏輯。
<code class="javascript">// store/index.js import Vuex from 'vuex' import Vue from 'vue' import counter from './modules/counter' Vue.use(Vuex) const store = new Vuex.Store({ modules: { counter } }) export default store</code>
<code class="javascript">// store/modules/counter.js export default { state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount (state) { return state.count } } }</code>
提示
this.$store
存取 Vuex 儲存。 mapActions
和 mapState
)將 Vuex 操作和狀態綁定到元件中。 以上是uniapp怎麼使用vuex的詳細內容。更多資訊請關注PHP中文網其他相關文章!