vuex使用

一、Vuex:是用于存储公共数据的仓库

属性：
state：定义初始值

getters：相当于computed计算，会将state的值派生出一个新值返回所需格式；试用于多组件用同一个属性要不同的值

mutions: 逻辑处理只能在mutions改变数据。页面通过commit，this.$store.commit(‘mutions里的方法名’，入参)

actions: 页面调用action用 ： this.$store.dispatch(‘action方法名’, 入参)

同步：不需要进行接口的调用直接进行逻辑处理、页面实时更新
异步：接口请求就是异步的

mapState用法同mapGetters

mapGetters用法：

getters:{
    introduction:state=>state.introduction
}

页面中使用

import {mapGetters} from "vuex"

<div class="div_demo">
   {{this.introduction}}
</div>

computed:{
    ...mapGetters([
      'introduction'
    ])
},

mapMutations用法：

mutations:{
    changeInput(state,接参）{
        state.value = 接参
    }
}

页面中使用：

import {mapMutations} from "vuex"
<el-input
    placeholder="输入框2"
    v-model="value"
    @input="inputChange"
>
</el-input>

methods:{
    ...mapMutations(['changeInput'])

    inputChange(e) {
      this.changeInput(传参)
    }
},

mapActions:用法同mapMutations