Vuex 基本简单的使用
2020-04-30 本文已影响0人
五四青年_4e7d
适用场景
1.全局共享数据,抛开繁琐的组件传值;
2.什么数据适合全局共享?(组件的共享数据);
3.好处?(谁要用,直接获取,组件修改其他的也变化);
4.数据管理集中化,全局管理方便;
如何在项目中使用vuex
1.下载
cnpm i vuex -S
2.导入,挂载vuex(main.js中)
//导入vuex
import Vuex from 'vuex'
//把vuex安装到vue中:
Vue.use(Vuex)
3.创建store对象
//创建一个store实例用来全局存储;
const store = new Vuex.Store({
state: {
number:5,
}
})
4.将store挂载到vm上
//store挂载到vm上,才能在每个组建中通过this.$store.state.公共数据名称
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App),
store
})
this.$store.state.数据名称的调用
.vue组件调用:(第一种直接使用)
<template>
<div>
{{this.$store.state.number}}
</div>
</template>
.vue组件调用:(第二种导入辅助函数)
import {mapState} from 'vuex' //按需导入辅助函数和计算属性配合
// 调用 mapState 函数和展开运算符
computed:{
...mapState(['number'])
}
页面直接使用
<div>{{number}}</div>
mutations:如果要修改state的数据需要在store中调用方法
全局定义使用:
const store = new Vuex.Store({
state: {
chuanc:10,
},
mutations: {
add(state){
state.chuanc += 2
},
}
})
调用辅助函数mapMutations
import {mapState,mapMutations } from 'vuex' //按需导入辅助函数和计算属性配合
调用方法:
methods: {
...mapMutations(['add'])
},
// 调用 mapState 函数和展开运算符
computed:{
...mapState(['chuanc'])
}
组件展示:
<div>
{{chuanc}}
<button @click="add">添加</button>
</div>
getters的使用(相当于计算属性):
1.getters中定义的方法,就相当于vue的计算属性;
2.getters变化了那么getters生成的数据也会变化;