Vuex 是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 和单纯的全局对象有以下两点不同
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
回顾组件
Index.vue
<template>
<div id="app">
<product-list-one :products="products"></product-list-one>
<product-list-two :products="products"></product-list-two>
</div>
</template>
<script>
import ProductListOne from './ProductListOne'
import ProductListTwo from './ProductListTwo'
export default {
name: 'Index',
components: {
'product-list-one': ProductListOne,
'product-list-two': ProductListTwo
},
data(){
return {
products: [
{name: 'apple', price: 200},
{name: 'pear', price: 140},
{name: 'banana', price: 20},
{name: 'mango', price: 10},
]
}
}
}
</script>ProductListOne
<template>
<div>
<h2>1</h2>
<ul>
<li v-for="product in products" :key="product+Math.random()*Date.now()">
<span class="name">{{product.name}}</span>
<span class="price">{{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['products'],
data(){
return {
}
}
}
</script>
<style scoped>
div{
font-weight: bold;
color: #f0f;
}
</style>ProductListTwo
<template>
<div>
<h2>2</h2>
<ul>
<li v-for="product in products" :key="product+Math.random()*Date.now()">
<span class="name">{{product.name}}</span>
<span class="price">{{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['products'],
data(){
return {
}
}
}
</script>store.js
state
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
products: [
{name: 'apple', price: 200},
{name: 'pear', price: 140},
{name: 'banana', price: 20},
{name: 'mango', price: 10},
]
}
})main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import {store} from './store'
new Vue({
el: '#app',
router,
store,
components: {App},
template: '<App/>'
})Index.vue
<template>
<div id="app">
<product-list-one></product-list-one>
<product-list-two></product-list-two>
</div>
</template>
<script>
import ProductListOne from './ProductListOne'
import ProductListTwo from './ProductListTwo'
export default {
name: 'Index',
components: {
'product-list-one': ProductListOne,
'product-list-two': ProductListTwo
},
data(){
return {
// 把数据移到store的state里了
}
}
}
</script>ProductListOne.vue
<template>
<div>
<h2>1</h2>
<ul>
<li v-for="product in products" :key="product+Math.random()*Date.now()">
<span class="name">{{product.name}}</span>
<span class="price">{{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
products(){
// 接收store的数据
return this.$store.state.products;
}
},
data(){
return {
}
}
}
</script>改变名字，价格打折
ProductListTwo.vue
v-for="product in saleProducts"
computed: {
saleProducts(){
return this.$store.state.products.map(product=>{
return {
name: `**${product.name}**`,
price: product.price/2
}
});
}
}如果在组件ProductListOne.vue也要改名打折，复制即可，但成百上千个组建也需要呢？就用到getters了。
getters
store.js
getters: {
saleProducts(state){
return state.products.map(product=>{
return {
name: `**${product.name}**`,
price: product.price/2
}
});
}
}ProductListOne.vue或其他需要用到的组件
computed: {
saleProducts(){
return this.$store.getters.saleProducts;
}
}Mutations
store.js
mutations: {
reducePrice: state=>{
state.products.forEach(p=>{
p.price -=1;
})
}
}组件的methods
<button @click="reductPrice">降价</button>
reducePrice(){
this.$store.commit('reducePrice')
}Actions
如果把mutations改为异步，即
mutations: {
reducePrice: state=>{
setTimeout(function(){
state.products.forEach(p=>{
p.price -=1;
})
},3000)
}
}这样在页面上呈现效果（3000ms后）和Vue Devtools Vuex调试（立即）不一致。但是在actions里面就可以了。
actions: {
reducePrice: context => {
setTimeout(function(){
context.commit('reducePrice'); // mutations的reducePrice
},3000)
}
}传参数
mutations 和 actions
mutations: {
reducePrice: (state,num)=>{
state.products.forEach(p=>{
p.price -=num;
})
}
},
actions: {
reducePrice: (context,num) => {
setTimeout(function(){
context.commit('reducePrice',num); // mutations的reducePrice
},3000)
}
}组件
<button @click="reducePrice(4)">降价</button>
4是实参
methods: {
reducePrice(amount){ // amount是形参
this.$store.dispatch('reducePrice',amount)
}
}如果 actions 里面有多个方法呢，不可能完全在methods里面列举，就可以在组件中这样解决。
import {mapGetters, mapActions} from 'vuex'
export default{
computed: {
...mapGetters(['saleProducts'])
},
methods: {
...mapActions(['reducePrice'])
}
}