javascript vue js vuex突变
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript vue js vuex突变相关的知识,希望对你有一定的参考价值。
<template>
<div id="app">
<product_list></product_list>
<sale_product_list></sale_product_list>
</div>
</template>
<script>
import product_list from '@/components/product_list.vue'
import sale_product_list from '@/components/sale_product_list.vue'
export default {
name: 'app',
components: {
'product_list':product_list,
'sale_product_list':sale_product_list
},
data() {
return {
}
},
computed: {
}
}
</script>
<template>
<div id="product_list">
<p>Original Price List</p>
<ul>
<li v-for='item in product_list' :key='item.index'>
<b>{{item.product}}</b> @ $<i>{{item.price}}</i>/KG
<button>Up</button>
<button>Down</button>
</li>
</ul>
<button @click='edit_all_price(true)'>All Up</button>
<button @click='edit_all_price(false)'>All Down</button>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data(){
return{
margin:0.5
}
},
computed:{
// info(){return this.$store.state.product_list}
...mapState([
'product_list'
])
},
methods:{
edit_all_price(direction){
this.$store.commit('mutate_all_price',[direction,this.margin])
}
}
}
</script>
<style scoped>
*{margin:0;padding:0;}
</style>
<template>
<div id="sale_product_list">
<p>Sale Product List</p>
<ul>
<li v-for='item in sale_product_list' :key='item.index'>
<b>{{item.product}}</b> @ $<i>{{item.price}}</i>/kg
</li>
</ul>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
data(){return{}},
computed:{
// sale_product_list(){ return this.$store.getters.sale_product_list}
...mapGetters([
'sale_product_list'
])
},
methods:{}
}
</script>
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const store = {
state:{
product_list: [
{
product:'apple', price:5
},
{
product:'peach', price:4
},
{
product:'grape', price:6
},
{
product:'orange', price:3
}
]
},
getters:{
sale_product_list:function(state){
return state.product_list.map(function(item){
return{
product:item.product,
price:item.price/2
}
})
}
},
mutations:{
mutate_all_price(state, argument){
// argument 0 is the direction and argument 1 is the margin
if(argument[0]) {
state.product_list.forEach(function(item){
item.price += argument[1]
})
}else {
state.product_list.forEach(function(item){
item.price -= argument[1]
})
}
}
},
actions:{}
}
export default new vuex.Store(store)
以上是关于javascript vue js vuex突变的主要内容,如果未能解决你的问题,请参考以下文章
Vuex mapstate 对象未定义和“[vuex] 未知突变类型:”
Vue,错误 [vuex] 不会在突变处理程序之外改变 vuex 存储状态
Vuex 突变和操作不起作用
状态渲染前的 Vue.js/vuex getters 错误
Vuex 状态随突变而变化 - apollo graphql 查询
来自 reactive() 的 Vue3/Vuex 对象一旦在突变中作为有效负载传递给 vuex,就会失去反应性