vuex初学习

一、Vuex概述

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

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

​ 1.集中管理共享的数据，易于开发和维护

​ 2.高效实现数据共享，提高开发效率

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

3.适合存储到vuex中的数据

​ 一般情况下，共享数据存到vuex中。私有数据，存在自身的data即可。

二、Vuex的基本使用

1.安装vuex

yarn add vuex

2.在src下新建一个store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中进行存储
  state: {   
  },
  用于变更数据
  mutations: {
  },
  用于处理异步任务
  actions: {
  },
  包装数据，加工成新的数据，类似vue的计算属性
  getters:{  
  }
})

3.在main.js中导入store实例并挂载到Vue实例上，之后就可以正常使用了

import Vue from 'vue'
import App from './App.vue'

// 导入store实例对象
import store from './store'
Vue.config.productionTip = false
new Vue({
  // 把store挂载到Vue实例上
  store,
  render: h => h(App),
}).$mount('#app')

三、核心概念

1.State

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

获取方式：
1.this.$store.state.全局数据名称

2.import { mapState } from 'vuex' 通过导入的mapState函数，将当前组件需要的数据，映射为当前组件的computed属性

store.js

state: {
    count: 0
  },

组件中使用state中的数据

//html
<h3>{{ $store.state.count }}</h3> //this

或

//html
<h3>{{ count }}</h3>
//js
import { mapState } from 'vuex'
computed: {
    ...mapState(['count']),
},

2.Mutation

用于变更Store中的数据

在vuex中，只能通过mutation变更store中的数据

store.js

state: {
    count: 0
},
mutations: {
    //   实现指定步长自增
    addN(state, step) {
      state.count += step
    },
    // 实现指定步长自减
    subN(state, step) {
      state.count -= step
    }
},

组件中使用

//html
<h3>{{ $store.state.count }}</h3>
<button @click="handle">+10</button>

//js
methods: {
    handle() {
      //   调用mutations里的函数addN
      this.$store.commit('addN', 10)
    }
}
  
或

//html
<h3>{{ count }}</h3>
<button @click="handle">-10</button>

//js
import { mapState, mapMutations } from 'vuex'
computed: {
    ...mapState(['count']),
},
methods: {
    ...mapMutations(['subN']),
    handle() {
      this.subN(10)
    }
}

3.Action

用于处理异步任务

异步变更数据，必须通过Action,而不能用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据

store.js

state: {
    count: 0
},
mutations: {
    //   实现指定步长自增
    addN(state, step) {
      state.count += step
    },
    // 实现指定步长自减
    subN(state, step) {
      state.count -= step
    }
 },
actions: {
    addAsync(context, step) {
      setTimeout(() => {
        //在actions中，不能直接修改state中的数据
        // 必须通过context.commit()触发某个mutation才行
        context.commit('addN', step)
      }, 1000)
    },
    subAsync(context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
},

组件中使用

//html
<h3>{{ $store.state.count }}</h3>
<button @click="handleAsync">+10 Async</button>

//js
methods: {
    handleAsync() {
      // dispatch专门用来触发action
      this.$store.dispatch('addAsync', 5)
    }
}

或

//html
<h3>{{ count }}</h3>
<button @click="subAsync(5)">-5 Async</button>

//js
import { mapState, mapActions } from 'vuex'
computed: {
    ...mapState(['count'])
},
methods: {
    ...mapActions(['subAsync'])
}

4.Getter

​1.包装数据，加工成新的数据，类似vue的计算属性

2.响应式，跟着Store实时变化

store.js

// 提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中进行存储
state: {
    count: 0
},
getters:{
      showNum(state){
          return `我${state.count}岁了`
      }
}

//html
<h3>{{ showNum }}</h3>

//js
import { mapState, mapGetters } from 'vuex'
computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
},