VUE全家桶——VUEX

一、Vuex概述

1.1组件之间共享数据的方式

1. 父向子传值：v-bind 属性绑定
2. 子向父传值：v-on 事件绑定
3. 兄弟组件之间共享数据：bus
   $on 接收数据的那个组件
   $emit 发送数据的那个组件

1.2 Vuex是什么

Vuex是实现组件全局状态（数据）管理的机制，可以方便的实现组件之间的数据共享。使用Vuex和不 使用Vuex的区别，如图所示：

1.3 使用Vuex统一管理状态的好处

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

什么样的数据合适存储到 Vuex 中

	一般情况下，只有组件之间共享数据，才有必要存储到 vuex 中；对于组件中的私有数据，仍然存储在组件自身的 data 中。

二、Vuex 的基本使用

2.1 安装 vuex 依赖包

	npm install vuex --save

2.2 在 main.js中导入依赖包 store

	import store from './store'

2.3 在 store 文件夹中的index.js导入依赖包

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

2.4 在 store 文件夹中的index.js中创建 store 对象

	export default new Vuex.Store({
  		state: {
    		count:0
  		},
  		mutations: {},
  		actions: {},
  		modules: {}
})

2.5 将 store 对象挂载到 vue 实例中

	new Vue({
  		router,
  		//将创建的共享数据对象，挂载到 vue 实例中
  		//所有组件都可以直接从 store 中获取全局数据了
  		store,
  		render: h => h(App)
	}).$mount('#app')

三、Vuex 的核心概念

3.1 vuex 中的主要核心概念如下：

    1. Sate
    2. Mutation
    3. Action
    4. Getter

3.2 Sate

	Sate 是提供唯一的公共数据源，所有共享数据都要统一放到 Store 的 Sate 中进行存储

//创建 store 数据源，提供唯一公共数据
const store = new Vue.Store({
	state:{
	count:0
	}
})

组件访问 State 中数据的第一种方式：

this.$store.state.count //(count是全局数据名称)

组件访问 State 中数据的第二种方式：

//1.从 vuex 中按需导入 mapState 函数
import {mapState} from 'vuex'

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

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

3.3 Vuex 的核心概念 Mutation

注意：只有 mutatins 中定义的函数，才有权利修改 state 中的数据
Mutation 用于变更 Store 中的数据。

1. 只能通过 Mutation 变更 Store 数据，不可以直接更改操作 Store 中的数据。
2. 通过这种方式虽然操作起来繁琐了些，但可以集中监控所有数据的变化

在 Mutation 中修改count 的值

  mutations: {
    add(state,num){ // num是接收子组件传递过来的参数
      state.count += num;
    }
  }

组件通过 commit 调用 mutations 中的函数

      methods: {
          // n是传给mutations中 add 方法的参数，如果没有参数就不用传参了
          addNum(n){
          		//commit 的作用就调用某个 mutations 函数
              this.$store.commit('add',n)
          }
      },

点击 button，store 中 count 的值就为 3 了，在浏览中检查一下：

this.$store.commit() 时触发 mutations 的第一种方式，
触发 mutations 的第二种方式：

//1.从 vuex 中按需导入 maoMutations 函数
import {mapState,mapMutations} from 'vuex'

通过导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：

//2.将指定 mutations 函数，映射为当前组件的 methods 函数
  methods:{
        ...mapMutations(['sub']),
        subNum(){
          this.sub(1) //要传递参数的话就写上参数
        }
      }

点击按钮后 count 值就会减 1 了

注意：在 mutations 里是不能做 异步操作；

3.4 Vuex 的核心概念 Action

Action 用于处理异步任务
如果通过异步操作变更数据，必须通过 Action 而不能使用Mutation，但是 Action 中还是要通过触发 Mutation 的方式间接变更数据

//actions 是处理异步操作
  actions: {
    addAsync(context,n){
      setTimeout(()=>{
        context.commit('add',n)
      },1000)
    }
  },

在组件中有两种方式触发 actions
第一种方式用过 this.$store.dispatch() 来触发

      methods: {
          // n是传给mutations中 add 方法的参数，如果没有参数就不用传参了
          addNum(n){
              //commit 的作用就调用某个 mutations 函数
            //   this.$store.commit('add',n)
            this.$store.dispatch('addAsync',n)//延迟1s加n
          },
        
      },

第二种方式通过映射 mapActions 的方式来触发：

注意：在 actions 中不能直接去修改 state 中的数据，如果要修改则要通过 context.commit() 来触发某个 mutations 才行

3.5 Vuex 的核心概念 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据

1. Getter 可以对 Store 中已有数据进行加工处理后形成新的数据，类似Vue 中的计算属性
2. Store 中的数据发生变化，Getter的数据也会跟着变化

组件中使用 getter 有两种方式：
第一种：
this.$store.getter.名称
store 中定义 getter 的名称

   showNum(state){
      return '当前最新数量是【'+ state.count + '】'
    }

组件中使用 getter

this.$store.getter.showNum

第二种：
也是通过映射的方式来实现

在 html 里 调用可以不用写 this，$store.getter.showNum；在javascript里调用则要加this，this.$store.getter.showNum；

大家可使用vue-cli3.X版本的 vue ui 来创建一个项目试试