vuex定义:
vuex 是vue的状态管理,为了更方便的实现多个组件之间的共享状态
安装:
npm install vuex --save
使用:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //让vue去使用vuex,将vuex的方法挂载到vue实例上面
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
//在main.js里面引入js
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
state
就是一个对象里面包含了全部的应用层级状态(我理解为里面就是存放的数据),可以通过($store.state)来拿取数据
当我们重vuex里面获取来了的数据如果直接赋值给data,我们后面在更改视图是不会更改的
例如:当组件加载的时候将this.$store.state.count的值赋给了count,当我们更改是更改的vuex里面的值并不是data里面的值
<template>
<div class="home">
<div>{{count}}</div>
<button @click="$store.state.count ++">click</button>
</div>
</template>
<script>
export default {
data () {
return {
count: this.$store.state.count
}
}
}
</script>
所以我们就会想到用计算属性(computed)
<template>
<div class="home">
<div>{{count}}</div>
<button @click="$store.state.count ++">click</button>
</div>
</template>
<script>
export default {
data () {
return {
// count: this.$store.state.count
}
},
computed: {
count () {
return this.$store.state.count
}
}
}
</script>
但是我们使用computed又会出现一个新问题,假如我们这里要用到10值或者100个值就写100个函数,所以我们就用mapState函数来解决
mapState辅助函数
定义
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:
我们要使用mapState函数我们就要从vuex里面引入该函数,
第一种写法(不推荐)
下面这样写有问题,我们知道data的优先级大于computed所以页面会被渲染成100
<template>
<div class="home">
<div>{{count}}</div>
<button @click="$store.state.count ++">click</button>
</div>
</template>
<script>
import { mapState } from 'vuex' //引入函数
export default {
data () {
return {
count: 100
}
},
computed: {
...mapState(['count'])
}
}
</script>
第二种写法
这里面又三种根据需求来选择
<template>
<div class="home">
<div>{{count}}</div>
<div>{{countAlias}}</div>
<div>{{countPlusLocalState}}</div>
<button @click="$store.state.count ++">click</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {
// count: 100
}
},
computed: {
...mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this
}
})
}
}
</script>