本文详细介绍了使用Vue框架结合Vuex状态管理库进行组件开发的过程。通过创建两个产品展示组件，演示了如何在Vue中引入Vuex进行状态管理，包括状态、获取器、突变和操作的使用，以及如何在组件中计算属性来访问状态。
新建2个组件：productOne,productTwo
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{}
})
main.js
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store.js'
new Vue({
el:'#app',
store,
render:h=>h(App)
})
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
products:[
{name:'apple',price:'2'},
{name:'banana',price:'3'},
{name:'pear',price:'4'},
{name:'melon',price:'5'},
]
}
})
<template>
<div class="product-one">
<ul>
<li v-for="item in product">
<div class="name">{{item.name}}</div>
<div class="price">{{item.price}}</div>
</li>
</ul>
</div>
</template>
<script>
export default{
computed:{
product(){
return this.$store.state.products
}
}
}
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
products:[
{name:'apple',price:'2'},
{name:'banana',price:'3'},
{name:'pear',price:'4'},
{name:'melon',price:'5'},
]
},
getters:{
changeProduct:(state) =>{
return state.products.map(val => {
return {
name:'**' +val.name+'--',
price:val.price*2
}
})
return state.products
}
},
mutations:{
decrePrice(state){
state.products.forEach(val =>{
val.price -=1
})
}
}
})
methods:{
decrePrice(){
return this.$store.commit('decrePrice')
}
}
methods:{
decrePrice(){
return this.$store.dispatch('decrePriceAction')
}
}
扫一扫
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
