Vuex

Posted 2020-11-23

组件之间小范围共享数据的方式
1.父向子传值：v-bind
2.子向父传值：v-on 事件绑定
3.兄弟组件之间的数据共享 EventBus
$on 接受数据的那个组件
$emit发送数据的那个组件

使用vuex的好处
1.能够集中管理共享的数据，易于开发和后期维护
2.能够高效的实现组件之间的数据共享，提高开发效率
3.存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储在vuex中
只有组件之间共享的数据才有必须要存储到vuex中，对于组件中的私有数据，依旧存储在组件中的data中

vuex的使用
安装vuex
npm install vuex --save

导入vuex包
import Vuex from "vuex"

Vue.use(Vuex)

创建store对象

const store = new Vuex.Store({
    //state中存放的就是共享的数据
        state:{
           count:0
        }

})
在导出的时候new Vuex.Store中的Store，这里首字母一定要大写,就相当于我们在使用构造函数(类)的时候首字母要大写

将store对象挂载到Vue实例中
new Vue({
    el:"#app",        render:h=>h(app),
        router,
      store   //所有的组件就可以从store中获取全局的数据了
})

Vuex的核心概念

state
提供唯一的公共数据源，所有共享的数据都要统一放到store中的state中进行存储
组件访问state中数据的第一种方式 this.$store.state.全局数据名称 在template中this可以省略
组件访问state中数据的第二种方式

1、从vuex中按需导入mapState函数
import {mapState} from "vuex"

2、将全局数据映射为当前组件的计算属性
computed:fucntion(){
   ...mapState([‘count‘])
}

通过刚才导入的mapState函数
将当前组件需要的全局数据，映射为当前组件的computed计算属性