【Vuex】基础知识

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

使用Vuex的好处：

1、集中管理共享数据，易于开发和后期维护。

2、高效实现组件之间的数据共享，提高开发效率。

3、存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

只有组件之间共享的数据才需要存到vuex中，组件的私有数据还是存放在自身的data中。

基本使用

1. 安装Vuex依赖包

   npm install vuex --save
   

2. 导入Vuex包

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

3. 创建store对象(出现单独文件夹store文件夹，配置index.js)

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

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

   new Vue({
   	el:'#app',
   	router:h=>h(app),
   	router,
   	store
   })
   

核心概念

安装Vuex时，默认出现的store中index.js的配置

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

1. State

作用：提供公共数据源，所有共享数据统一放到 Store的State中进行存储

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

• 组件访问State中数据的方式

  • 1️⃣ 第一种调用方式[根组件]

    在template中this是可以省略的

    this.$store.state.全局数据名称
    

  • 2️⃣ 第二种调用方式[子组件]

    • 从vuex中按需导入mapState函数

    import { mapState } from 'vuex'
    

    • 通过刚才导入的mapState函数，映射为☀️computed计算

    computed:{
      ...mapState(['count'])
    }
      
    <template>
      <div>
    	<h1>当前最新的count值为：{{count}}</h1>		// 直接渲染出来
      </div>
    </template>
    

2. Mutations

作用：用来变更State中的数据

mutations:{
  add(state){
  // 变更状态
  state.count++
  }
}

• 在子组件中通过methods方法进行调用mutations

  • 1️⃣ 调用mutations的第一种方法：

    methods:{
      handle() {
        this.$store.commit('add')
      }
    }
    

  • 2️⃣ 调用mutations的第二种方法：

    • 从vuex中按需导入mapMutations

    import { mapMutations } from 'vuex'
    

    • 通过刚才导入的mapMutations函数，映射为⭐methods方法

    methods:{
      ...mapMutations(['add']),
      handle(){
        this.add()
      }
    }
    

• 传递参数

  // store 中 index.js配置
  mutations:{
    add(state,step){
    // 变更状态
    state.count+=step
    }
  }
  
  //子组件中的配置
  methods:{
    handle() {
    this.$store.commit('add',5)		//传递参数
    }
  }
  

3. Actions

作用：执行异步任务 同样也是使用commit进行修改State中的值

• 1️⃣第一种方法：

// store 中 index.js配置
actions:{
    addAsync(context){
      setTimeout(()=>{				//延迟一秒进行操作
        context.commit('add')
      },1000)
    }
}
//子组件中的配置
methods:{
    handle() {
      this.$store.dispatch('addAsync')		//调用actions
    }
}

• 传递参数

actions:{
    addAsync(context,step){				//接收参数
      setTimeout(()=>{				//延迟一秒进行操作
        context.commit('addN', step)
      },1000)
    }
}
//子组件中的配置
methods:{
    handle() {
      this.$store.dispatch('addAsync',5)		//调用actions,传递参数5
    }
}

• 2️⃣第二种方法：

  • 从vuex中按需导入mapActions

  import { mapActions } from 'vuex'
  

  • 通过刚才导入的mapActions函数，映射为⭐ methods方法

  // store中index.js的actions
  actions:{
  subAsyncD (context) {
    setTimeout(() => {
      context.commit('sub')
    }, 1000)
  },
  subAsyncND (context, step) {
    setTimeout(() => {
      context.commit('subN', step)
    }, 1000)
  }
  
  
  methods:{
    // 此处定义的数组内的为store中index.js中actions中的名字
    ...mapActions(['subAsyncD', 'subAsyncND']),
    // 定义的方法subNumD 然后调用方法
    subNumD () {
      this.subAsyncD()
    },
    subNumND () {
      this.subAsyncND(5)
    }
  }
  

4. Getters

**作用：对store中的数据进行加工处理变成新的数据 **

• store中index.js中的getters

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum (state) {
      return '当前的值为：[+"state.count"+]'
    }
  }
})

• 1️⃣ 调用getters的第一种方法：

this.$store.getters.名称(showNum)

• 2️⃣调用getters的第二种方法：

  • 从vuex中按需导入mapGetters

    import {mapGetters} from 'vuex'
    

  • 通过刚才导入的mapGetters函数，映射为☀️ computed计算

    computed:{
      // 此处定义的数组内的为store中index.js中getters中的名字
      ...mapActions(['showNum'])
    }
    
    <template>
      <div>
        <h1>{{showNum}}</h1>		// 直接渲染出来
      </div>
    </template>