1. Vuex的配置
1.1 下载vuex
将vuex安装在生产环境依赖中
$ npm install vuex --save
1.2 配置vuex
1.2.1 实例化Store
vuex是vue中store,最先是有reate提出来的 ,就是单项数据流
import Vue from 'vue'
import Vuex from 'vuex'
// Vue通过use使用Vuex插件
Vue.use(Vuex)
// 示例化Vuex.Store
let store = new Vuex.Store({
state:{
count: 0
}
})
// 导出store
export default store
1.2.2 通过vue实例配置store
说明:
- 通过vue示例中使用store选项
- 是为了将
store对象挂Vue的原型$store上 - 这样所有的组件内部就可以使用
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')
2. 使用State
2.1 单一状态树
所谓的单一状态树,用一个对象包含应用中全部的状态, 这个对象作为唯一数据源而存在.
也就是意味着每个应用只包含一个store实例,
2.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>
示例说明:
- 虽然我们可以直接在组件中修改Vuex中的状态.但是不推荐使用
- 因为直接修改状态,不会被devtool检测到,不利于代码的维护和调整
那么我们应该如何修改状态的数据呢, 我们mutation中在讲
3. Getter 的使用
3.1 关于Getter的了解
- 有的是有我们对于从store里的state中派生一些状态数来, 例如对于数据的过滤
- 如果我们在获取数据以后在进行过滤处理,那么同样的逻辑可能需要在不同的地方使用
- 在Vue我们采用的方式是定义计算属性处理
- Vuex提供了一个
getter(可以认为是store中的计算属性),根据依赖状态计算值后返回并缓存起来 - 只有当getter依赖的状态发生改变时才会被重新计算
3.2 示例代码
3.2.1 定义getter
let store = new Vuex.Store({
state:{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15},
{id:3,text:"香蕉",price:22},
{id:4,text:"菠萝",price:26}
]
},
getters:{
filterFruits(state){
return state.fruits.filter(fruit => fruit.price > 19)
}
}
})
3.2.2 使用getter
<ul>
<!-- 使用getter,即vuex中的计算属性 -->
{{$store.getters.filterFruits}}
</ul>
3.3 Getter参数
3.3.1 Getter第一个参数
Getter第一个参数为状态state, 用于收获Getter的依赖状态
let store = new Vuex.Store({
state:{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15},
{id:3,text:"香蕉",price:22},
{id:4,text:"菠萝",price:26}
]
},
getters:{
filterFruits(state){
console.log(state);
/*
state值为
{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15},
{id:3,text:"香蕉",price:22},
{id:4,text:"菠萝",price:26}
]
},
*/
return state.fruits.filter(fruit => fruit.price > 19)
}
},
})
3.3.2 Getter的第二个参数
Getter的第二个参数就是选项Getters, 作用是用来获取其他Getter函数
let store = new Vuex.Store({
state:{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15},
{id:3,text:"香蕉",price:22},
{id:4,text:"菠萝",price:26}
]
},
getters:{
filterFruits(state,getters){
console.log(state);
console.log(getters);
/*
{
filterFruits: (...)
get filterFruits: ƒ ()
__proto__: Object
}
*/
return state.fruits.filter(fruit => fruit.price > 19)
}
},
})
作用:
可以在已经过滤后的状态基础上在此过滤,
3.4 通过方法访问
说明:
- 通常对于getter的使用方法,都是返回处理完毕后的数据
- 但是有的时候我们需要处理数据的条件是外部传递过来的,例如上个示例中过滤价格
- 这个的话getter可以返回一个函数, 这个函数用来接收外部传递的参数
示例代码:
let store = new Vuex.Store({
state:{
fruits:[
{id:1,text:"苹果",price:20},
{id:2,text:"梨子",price:15},
{id:3,text:"香蕉",price:22},
{id:4,text:"菠萝",price:26}
]
},
getters:{
filterFruits(state,getters){
// getter返回的不是确定的值而是一个函数
// 那么此时在通过$store.getters.filterFruits获取到的就是一个函数
// 既然是函数就可以当成方法使用, 传递参数
// 例如 $store.getters.filterFruits(20)
return (price) => {
return state.fruits.filter(fruit => fruit.price > price)
}
}
},
})
