Vuex的搭建_基本使用_简易求和案例_getters

vuex

专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

什么时候使用vuex？

多个组件依赖于同一个状态

来自不同组件的行为需要变更同一状态

1.搭建Vuex环境

（1）创建文件src/store/index.js

//用于创建vuex中最为核心的store
import Vue  from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {}
//准备mutations——用域操作数据（state）
const mutations = {}
//准备state——用于存储数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

（2）在main.js文件中传入store

//.....
//引入store
import store from './store'

//创建Vue实例对象————vm
new Vue({
  el:'#app',
  //将App组件放入容器中
  render: h => h(App),
  store,
  beforeCreate(){
    Vue.prototype.$bus = this
  }
})

2.基本使用

实现如图四个功能

index.js文件

//用于创建vuex中最为核心的store
import Vue  from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {
    //由于加减没有什么业务逻辑，可以直接在组件中越过actions，编写commit——详见 Count.vue
    /* jia(context,value){
           context.commit('JIA',value)
       },
       jian(context,value){
           context.commit('JIAN',value)
       },  */
    //响应组件中奇数加的动作
    jiaOdd(context,value){
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }   
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit('JIA',value)
        }, 500);
    }
}
//准备mutations——用域操作数据（state）
const mutations = {
    JIA(state,value){      //参数state-sum value
        state.sum += value
    },
    JIAN(state,value){      //参数state-sum value
        state.sum -= value
    }
}
//准备state——用于存储数据
const state = {
    sum:0
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

Count.vue

<template>
  <div>
      <h1>当前求和为：{{$store.state.sum}}</h1>
      <select v-model="n">
          <option :value="1">1</option>
          <option :value="2">2</option>
          <option :value="3">3</option>
          <!-- 加了冒号后对引号内容进行js表达式解析 不加后作为字符串 -->
      </select>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementOdd">当前求和为奇数再加</button>
      <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
    name:'Count',
    data() {
        return {
            n:1,        //用户选择的数
        }
    },
    methods: {
        increment(){
            this.$store.commit('JIA',this.n)
        },
        decrement(){
            this.$store.commit('JIAN',this.n)
        },
        incrementOdd(){
            this.$store.dispatch('jiaOdd',this.n)
        },
        incrementWait(){
            this.$store.dispatch('jiaWait',this.n)
        }
    },
}
</script>

注：
组件中读取vuex中的数据：$store.state.sum

组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或$store.commit('action中的方法名',数据)

若没有网络请求或其他业务逻辑，组件中可以越过actions，不写dispatch，直接编写commit

getters的使用

当state中的数据需要经过加工后再使用时，可以使用getters加工

实现如图求和放大十倍功能

在index.js中追加getters配置

....
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

组件中读取数据$store.getters.bigSum