1、VueX的配置
将VueX安装在生产环境依赖中
npm install vuex --save
2、配置VueX
2.1 实例化Store
import Vue from 'vue'
import Vuex from 'vuex'
//Vue通过use使用VueX插件
Vue.use(Vuex)
//实例化Vuex.Store
let store = new Vuex.store({
store:{
count : 0
}
})
2.2 通过vue实例配置store
说明：
1. 通过vue实例中的store选项
2. 是为了将store对象挂Vue的原型$store上
3. 这样所有的组件内部就可以使用 this.$store 来操作store
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render:h=>h(App)
}).$mount('#app')
3、使用State
3.1 单一状态树
所谓的单一状态树，用一个对象包含应用中全部的状态，这个对象作为唯一数据源而存在。也就是意味着每个应用只包含一个store实例。
3.2 使用State中的数据
在组件中使用state中的数据
<template>
<div class="home">
<div class="count">数字: {{ count }}</div>
<button @click="increment">++</button>
<button @click="decrement">--</button>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return { }
},
methods:{
increment(){
// 直接操作State中的数据
this.$store.state.count++
},
decrement(){
// 直接操作State中的数据
this.$store.state.count--
}
}
}
</script>
<style >
.count{
font-size:30px;
padding:20px;
}
</style>
示例总结：
1. 可以直接修改Vuex中的状态（但不推荐），因为直接修改不利于调试
4、Getter的使用
4.1 Getter的了解
1. 有的是我们对于store里的state中派生一些状态出来，如：数据的过滤
2. 在获取数据后进行过滤处理，同样的逻辑可能会在不同的地方使用
3. 在Vue中也可以采用计算属性进行处理（计算属性就是会将数据处理进行缓存的）
4. Vuex提供了一个getter，类似于store中的计算属性，根据依赖状态计算值后返回并缓存起来
5. 只有当getter依赖的状态发生了改变时才会被重新计算
let store = new Vuex.Store({
state:{
fruits:[
{ id:1, text:'苹果', price:'20' },
{ id:2, text:'梨子', price:'35' },
{ id:3, text:'香蕉', price:'28' },
{ id:4, text:'菠萝', price:'76' },
{ id:5, text:'榴莲', price:'19' },
]，
gettters:{
filterFruits(state){
return state.fruits.filter( fruit => fruit.price > 20)
}
}
}
})
4.2 使用getter
<ul>
<!-- 使用getter,即vuex中的计算属性 -->
{{$store.getters.filterFruits}}
</ul>
4.3 Getter参数
1. Getter的第一个参数为状态state，用于收获Getter的依赖状态
let store = new Vuex.Store({
state:{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15},
]
},
getters:{
filterFruits(state){
console.log(state);
/* state值为 { fruits:[ {id:1,text:"苹果",price:20}, {id:2,text:"梨子",price:15}] }, */
return state.fruits.filter(fruit => fruit.price > 19)
}
},
})
2. Getter的第二个参数
Getter的第二个参数就是选项Getters，作用是用来获取其他Getter函数
let store = new Vuex.Store({
state:{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15}
]
},
getters:{
filterFruits(state,getters){
console.log(state);
console.log(getters);
/* { filterFruits: (...) get filterFruits: ƒ () __proto__: Object } */
return state.fruits.filter(fruit => fruit.price > 19)
}
},
})
3. 通过方法访问
说明：
1. 通常对于getter的使用方法，都是返回处理完毕后的数据
2. 但是有的时候我们需要处理数据的条件是外部传递过来的，例如示例过滤价格
3. getter可以返回一个函数，这个函数用来接收外部传递的参数
let store = new Vuex.Store({
state:{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15}
]
},
getters:{
filterFruits(state,getters){
return (price) => { return state.fruits.filter(fruit => fruit.price > price)
}
}
},
})
总结：
1、getter返回的不是确定的值而是一个函数
2、那么此时在通过$store.getters.filterFruits获取到的就是一个函数
3、既然是函数就可以当成方法使用, 传递参数
4、如 $store.getters.filterFruits(20)
