07-VueX

1.Vuex概述

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

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

注意：以上只能实现小范围的数据之间的共享

1.2.vuex是什么？

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享

1.3.使用Vuex管理数据的好处

• A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护

• B.能够高效的实现组件之间的数据共享，提高开发效率

• C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

1.4.什么样的数据适合存储在vuex中

一般情况下：

• 只有组件之间共享的数据，才有必要存储到 vuex 中。
• 对于组件中的私有数据，依旧存储在组件自身的 data 中即可 。

2.Vuex的基本使用

首先创建一个VUE项目

2.1.vuex的基本使用

• 1、安装 vuex 的依赖包

npm install vuex --save

• 2、在项目中导入 vuex 包，并将其挂载到vue根组件中

import Vuex from ‘vuex’
Vue.use(Vuex)

• 3、创建 store 对象

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

• 4、将 store 对象挂载到 vue 实例中

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

3.Vuex中的核心特性(重点)

• Vuex 中的主要核心概念如下：State，Mutation，Action，Getter

3.1.state

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

• 例如，打开项目中的store.js文件，在state对象中可以添加我们要共享的数据，count。

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

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

this.$store.state.全局数据名称  如：this.$store.state.count

<div>{{this.$store.state.count}}</div>

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

//将全局数据映射为当前组件的计算属性
先按需导入mapState函数：
import { mapState } from 'vuex'
然后数据映射为计算属性：
computed:{ ...mapState(['全局数据名称'])}

<div>{{全局数据名称}}</div>

3.2.mutation

Mutation用于修改变更store中的数据

使用方式：第一种

• 1、打开store.js文件，在mutations中添加代码如下

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

• 然后在vue组件中给按钮添加事件代码如下：

<button @click="Add">+1</button>
methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('add',10)
  }
}

使用方式：第二种

//将mutation映射为当前组件的函数
先按需导入mapMutations函数：
import { mapMutations } from 'vuex'
然后mutation映射为组件函数：
methods:{
   //获得mapMutations映射的add函数
   ...mapMutations(['add'])
   //当点击按钮时触发Add函数
   Add(){
      //调用add函数完成对数据的操作
      this.add(10);
      }
}

3.3.action

在mutations中不能编写异步的代码，会导致vue调试器的显示出错，在vuex中我们可以使用Action来执行异步操作。

注意：actions并不直接的改变state，而是发起mutations

使用方式：第一种

• 打开store.js文件，修改action，如下：

actions: {
   //actions中的函数最终还是要调用mutations的函数，只有mutations中的函数可以修改state中的值
   mutations:{
   	add(state,step){
   		state.count+=step;
   	}
   }
  //第一个参数永远都是context
  //传过来的参数使用第二个参数来接收
  addAsync(context,step){
    setTimeout(()=>{
      //使用commit函数调用mutations中的对应函数
      context.commit('add',step);
    },2000)
  }
}

• 然后在vue组件中给按钮添加事件代码如下：

methods:{
  AddAsync(){
   //使用dispatch函数调用actions中的对应函数，
   //第一个参数就是我们要调用的actions中的函数名
   //第二个参数就是传递给函数的参数
    this.$store.dispatch('addAsync',5)
  }
}

使用方式：第二种

//从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'
//将指定的actions函数，映射为当前组件的methods函数
methods:{
  //获得mapActions映射的addSync函数
  ...mapMutations(['addAsync'])
  AddSync(){
      //调用addSync函数完成对数据的操作
      this.addaync(10);
      }
}

3.4.getter

Getter用于对store中的数据进行加工处理形成新的数据，它只会包装store中保存的数据，并不会修改store中原来保存的数据，当刷新时页面中呈现的还是原来的数据。

当store中的数据发生变化时，Getter生成的内容也会随之变化

使用方式：第一种

• 打开store.js文件，添加getters，如下：

export default new Vuex.Store({
  .......
  getters:{
    //使用showNum属性来包装state中的count属性（注意：只有mutations中的函数可以修改state中的值）
    showNum : state =>{
      return state.count;
    }
  }
})

• 然后在vue组件中添加插值表达式使用getters

<h3>{{$store.getters.showNum}}</h3>

使用方式：第二种

//在组件中，导入mapGetters，并将之映射为计算属性
import { mapGetters } from 'vuex'

//getter类似于vue的计算属性
computed:{
  ...mapGetters(['showNum'])
}

3.5.module

store可以分为模块，每个模块有自己的，state，getter，mutation，action

例如：为了数据便于区分，使用三个js文件存放了全局数据：store1.js，store2.js，store3.js，每个js中都包含上面的三到四个属性

import Vue from 'vue'
import Vuex from 'vuex'
import store1 from './store1.js'
import store2 from './store2.js'
import store3 from './store3.js'

// 注入到根实例
Vue.use(Vuex)
// 这个js引入了store1.js，store2.js，store3.js
const store = new Vuex.Store({
    modules: {
        configure,
        user,
        song
    }
})

export default store