vuex

1、什么是vuex?

　　　　vuex是vue.js 是官方推荐的状态管理工具

 

2、vuex的优势

　　　　1、集中式管理：所有的数据及管理都是通过store对象来完成

　　　　2、响应式：当store 中的数据发生变化时，所有用到数据的组件会自动更新

　　　　3、安全：它是单向数据流管理

 

3、vuex的基本概念

　　　　

3、vuex的基本概念

　　　　

　　　　1、store：是vuex 的顶级管理对象，所有的共享数据、及相关操作都存储在store中（绿色的虚线部分）

　　　　2、state：状态，所有的共享数据都存储在state对象中（它就是一个数据对象,可以放基本类型、对象类型）

　　　　　　　　　　注意：state只能读取数据，不能操作数据

　　　　3、mutation：用来操作state 的同步行为

　　　　4、action：用来操作state 的异步行为

　　　　　　　　　　　注意：1、action 异步请求完数据，也不会直接更新state

　　　　　　　　　　　　　　 2、最终还是要通过mutaton 来实现状态的操作

 

 

4、基本用法

　　　　第一步：安装vuex（它和vue-router一样，都是属于vue的插件）

　　　　　　　　　　yarn  add  vuex

　　　　　　　　　　npm  install  vuex  -S

　　　　第二步：在main.js 中，导入vuex 插件

import Vuex from 'vuex';
Vue.use(Vuex);

　　　　第三步：创建一个vuex的store

 

　　　　第四步：把vuex，注入到根实例里面

// 根组件
new Vue({
  data: {
    globalCount: 100
  },
  // 第4步：注入到根组件中
  store,
  router,
  render: h => h(App),
}).$mount('#app')

　　　　第五步：在其他组件，使用state中的共享数据

 

 count: {{count}}


export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    })
  },