vuex学习

1.什么时候用：当大范围频繁地进行组件的数据传输，传统的组件之间传值会力不从心。这时候就要使用vuex

2.vuex是什么:vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

一目了然，vuex的好处 

3.使用vuex统一管理状态的好处
    

 4.vuex的基本使用

       

 

具体步骤:
1.store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {

    },
    mutations: {

    },
    actions: {

    }
})

 2.mian.js挂载store

//导入vue这个包，得到vue构造函数
import Vue from 'vue'
// 导入App.vue根组件，将来要把App.vue中的模板结构渲染到HTML页面中
import APP from './App.vue'
//导入router
import router from '@/router/index'
// main.js文件中引入并全局注册
import * as echarts from 'echarts'
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts
// 导入store.js
import store from './store.js'

Vue.use(echarts)





Vue.config.productionTip = false
// 创建vue的实例对象
new Vue({
  render: h => h(APP),
  router: router,
  store
}).$mount('#app');

// $mount和el完全一样

主要学习内容:vuex的核心概念

1.state 

（1）访问state数据的第一种方式

(2)第二种方式 

 

2.mutation

（1）定义方式与触发条件

（2）在触发mutations时传递参数 

 

 （3）触发mutations的第二种方式

3.action

this.$store.dispatch触发actions的第一种方式

第二种方式 

 

 

4.getter 相当于计算属性