在Vue中使用Vuex和引用CDN靜態資源有以下步驟:
1. 在HTML文件中引入Vue和Vuex的CDN鏈接,例如:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
2. 創建一個Vue實例,并在data選項中定義狀態。在這個示例中,我們創建了一個名為store的Vuex Store,并將其作為Vue實例的屬性:
var store = new Vuex.Store({state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
});
new Vue({
el: '#app',
store: store,
// ...
});
3. 在HTML文件中創建一個容器,并將其與Vue實例關聯:
<div id="app"><!-- Your app content here -->
</div>
4. 使用Vue組件訪問和修改Vuex狀態。可以通過this.$store.state來訪問狀態,this.$store.commit()來觸發mutation來修改狀態:
<template><div>
<p>Count: {{ $store.state.count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$store.commit('increment');
}
}
}
</script>
在上述示例中,在Vue組件中,我們通過$store.state.count來獲取Vuex Store中的計數值,并通過按鈕的點擊事件調用increment()方法來觸發mutation來增加計數值。
通過這些步驟,您可以在Vue中使用CDN引入的Vuex靜態資源,并使用Vuex來管理和訪問全局狀態。