Vuex简介

环境

 

Vue2的项目中，使用的是vuex3

1. 创建vue2的项目
2. 安装vuex3，命令：npm i vuex@3

Vuex是什么 

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信

vuex的五个大块

1. state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
2. mutations ： 使用它来修改数据(类似于methods)
3. getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
4. actions： 发起异步请求
5. modules： 模块拆分

示例

main.js

import Vue from "vue"

import App from "./App"

import Vuex from "vuex"

import store from "./store/index"

Vue.config.productionTip = false;

Vue.use(Vuex);

new Vue({
    el: "#app",
    render: h => h(App),
    store
})

App.vue

<template>
  <div>
    <h1>{{$store.state.sum}}</h1>
    <h1>{{$store.getters.bigSum}}</h1>
    <button @click="$store.dispatch('jia',n++)">点击增加</button>
  </div>
</template>

<script>

import {mapState,mapGetters,mapMutations,mapActions} from "vuex"

export default {
  name: "App",
  components: {
  },
  data() {
    return {
      n:1
    };
  },
  mounted(){
    console.log(this)
  }
};
</script>

<style>
</style>

index.js

import Vuex from "vuex"
import Vue from "vue"

//引用Vuex必须在Store创建之前
Vue.use(Vuex)

//创建actions用于相应组件中的动作
const actions = {
    jia(context, value) {
        context.commit("JIA", value);
    }
}

//创建mutations用于操作数据
const mutations = {
    JIA(context, value) {
        context.sum += value;
    }
}

//创建state用于存储数据
const state = {
    sum: 0
}

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

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

mapState与mapGetters

mapState与mapGetters都是在计算属性中使用的。

<template>
  <div>
    <h1>{{he}}</h1>
    <h1>{{bigSumNew}}</h1>
    <h1>姓名：{{mingcheng}}</h1>
    <h1>年龄：{{nianling}}</h1>
    <button @click="$store.dispatch('jia',n++)">点击增加</button>
  </div>
</template>

<script>
//引入mapState
import {mapState,mapGetters} from "vuex"

export default {
  name: "App",
  components: {
  },
  data() {
    return {
      n:1
    };
  },
  computed:{
/*     sum(){
      return this.$store.state.sum
    },
    name(){
      return this.$store.state.name
    },
    age(){
      return this.$store.state.age
    }, */
    //相当于注释中的代码，返回值是：[计算属性名:$store.state.属性名...]
    ...mapState({he:"sum",mingcheng:"name",nianling:"age"}),
    
    //如果计算属性名与$store.state.属性名相同可以简写为
    //...mapState({"sum","name","age"})


    /* bigSum(){
      return this.$store.getters.bigSum
    } */

    //用法与mapState一样，作用域bigSum一样
    ...mapGetters({bigSumNew:"bigSum"})
    //如果计算属性名与$store.getters.属性名相同可以简写为
    //...mapGetters({"sum","name","age"})

  },
  mounted(){
    console.log(this)
  }
};
</script>

<style>
</style>

mapMutations与mapActions

mapMutations：用于简写一堆方法调用$store.commit('函数名',参数)

在插值语法等，调用mapMutation生成的方法时如果有参数必须要加上参数。

<h1>{{increment}}</h1>
<h1>{{decrement}}</h1>

//在methods中
methods:{
    increment(){
        this.$store.commit('JIA',this.n)
    },
    decrement(){
        this.$store.commit('JIAN',this.n)
    }
}

//可以简写为
//调用函数时必须要加上参数
<h1>{{increment(n)}}</h1>
<h1>{{decrement(n)}}</h1>
methods:{
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
    ...mapMutations({increment:"JIA",decrement:"JIAN"})
    //如果方法名与store中的名称相同可以使用简写形式
    //...mapMutations({"JIA","JIAN"})
}

mapActions：用于简写一堆方法调用$store.dispatch('函数名',参数)

在插值语法等，调用mapActions生成的方法时如果有参数必须要加上参数。

<h1>{{increment}}</h1>
<h1>{{decrement}}</h1>

//在methods中
methods:{
    increment(){
        this.$store.dispatch('JIA',this.n)
    },
    decrement(){
        this.$store.dispatch('JIAN',this.n)
    }
}

//------------------------------------------------------

//可以简写为
//调用函数时必须要加上参数
<h1>{{increment(n)}}</h1>
<h1>{{decrement(n)}}</h1>
methods:{
    //借助mapActionss生成对应的方法，方法中会调用dispatch去联系mutations
    ...mapActionss({increment:"JIA",decrement:"JIAN"})
    //如果方法名与store中的名称相同可以使用简写形式
    //...mapActionss({"JIA","JIAN"})
}

模块化编程

vue.js

<template>
  <div>
    <h1>{{sum}}</h1>
    <h1>{{bigSumNew}}</h1>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <button @click="$store.dispatch('a/jia',n++)">点击增加</button>
  </div>
</template>

<script>
//引入mapState
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"

export default {
  name: "App",
  components: {
  },
  data() {
    return {
      n:1
    };
  },
  computed:{
      sum(){
        //使用vuex模块化编程必须是state.模块名.变量名
        return this.$store.state.a.sum;
      },
    ...mapState("a",["name","age"]),
    bigSumNew(){
      return this.$store.getters['a/bigSum']
    }
  },
  mounted(){
    console.log(this)
  }
};
</script>

<style>
</style>

 index.js

import Vuex from "vuex"
import Vue from "vue"

//引用Vuex必须在Store创建之前
Vue.use(Vuex)

//使用模块化编程调用dispatch和commit时必须是“对象名/方法名”，如：xin/function
const xin={
    namespaced:true,
    actions:{
        jia(context, value) {
            context.commit("JIA", value);
        }
    },
    mutations:{
        JIA(context, value) {
            context.sum += value;
        }
    },
    state:{
        sum: 0,
        name:"xin",
        age:66
    },
    getters:{
        bigSum(state) {
            return state.sum * 10
        }
    }
}


export default new Vuex.Store({
    modules:{
        a:xin
    }
})