vuex的使用，简单明了，大白话教学__Vue.js__前端

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

概念

vuex作为vue生态的重要组成部分，了解并能熟练使用vuex是每一个vue开发者必备的技能。

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

不需要多余的解释，直接上使用方法（懂得都懂）

vuex的几个核心概念

store：(存放数据的地方)
mutation：(提交方法，用于改变store中的数据)
actoin: (mutation改变数据的时或存在异步操作，action用于处理异步逻辑，然后提交mutation)
getter: (数据的计算属性)

vuex的使用

首先安装vuex npm install vuex --save

在src 文件夹下新建store文件夹，store下新建index.js 文件

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        name: '小裕',
        list: []
    }
})

export default store

然后修改main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,// 把我们创建的store 挂载到vue实例
  components: { App },
  template: '<App/>',
});

state的使用

在组件中拿到store里的值的两种方法

import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: ''
    };
  },

  created() {
    console.log(this.$store.state.name, "拿到store的值") // 直接取值
    console.log(this.name,"取值") // 通过mapState api 解构取值
  },
  computed: {
    ...mapState(["name", "list"]),
  },

};

Getter的使用

Getter用来对state中的数据进行二次修饰
在store中增加Getter属性

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        name: '小裕',
        list: []
    },

    getters: {
        getName(state) {
            // 假如所有的name前面拼接一句'你好'
            return `你好${state.name}`
        }
    },
  })

组件中使用getters的两种方法

import { mapState, mapGetters } from "vuex";

created() {
    console.log(this.$store.getters.getName, '修饰name')
    console.log(this.getName, '解构修饰器');
}
computed: {
   ...mapState(["name", "list"]),
   ...mapGetters(['getName'])
},

mutilation的使用

mutation修改store里的值 当能访问到store里的值还不够，还要能修改当中的值，此时就会用到mutation。

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        name: '小裕',
        list: []
    },
    mutations:{
        setName(state, payload){
            // 第一个参数为store中的state,第二个参数为提交mutation时在组件中所传的参
            state.name =  payload.name // 改变store中的值 
        },

        setList(state,payload){
            state.list = payload.list
        }
    }
})

export default store

在组件中调用mutation中的两种方法

import { mapMutations, mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: ''
    };
  },
  
  created() {
    console.log(this.$store.state.name, "拿到store的值");
  },

  computed: {
    ...mapState(["name", "list"]),
  },
  methods: {
    ...mapMutations(["setName", "setList"]),
    
    updateName() {
      // 直接使用$store.commit调用mutation方法
      this.$store.commit('setName',{ name:'小群群' })
      // 使用vuex的mapMutations api  结构方法后直接调用
      this.setName({ name: "小群群" });

    },
    updateList() {
      this.setList({ list: [1, 2, 3.4] });
    }
  },
};

action的使用

action异步修改store中的值 上述mutilation修改store的值没有考虑异步情况，若有异步行为，则要写在action中，然后再去提交mutation修改

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        name: '小裕',
        list: []
    },
    mutations:{
        setName(state, payload){
            // 第一个参数为store中的state,第二个参数为提交mutation时在组件中所传的参
            state.name =  payload.name // 改变store中的值 
        },

        setList(state,payload){
            state.list = payload.list
        }
    },
    actions:{
        setNames(con,payload) {
            // 含有异步操作时使用action处理,随后调用action
            // 第一个参数con 是复制的一份store，可以通过结构commit，直接使用，例如下面的方法
            return new Promise(resove => {
                setTimeout(() => {
                    con.commit('setName',payload)
                }, 1000);
            })
        },
        setLists({commit},payload){
            commit('setList',payload)
        }
    }
})

export default store

组件中调用action的两种方法

import { mapState, mapActions } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: ''
    };
  },
  
  created() {
    console.log(this.$store.state.name, "拿到store的值");
  },

  computed: {
    ...mapState(["name", "list"]),
  },
  methods: {
    ...mapActions(["setNames", "setLists"]),
    
    actionName() {
      // 调用action的两种方法
      this.$store.dispatch('setName',{ name:'action王帅波' }) // dispatch直接调用
      this.setNames({ name: "action王帅波" });// 使用mapActions api 解构action方法调用
    },

    actionList() {
      this.setLists({ list: ["yy", "uu", "oo"] });
    },
  },
};

直接调用mutation是this.$store.commit()
直接调用action是this.$store.dispatch()

结尾

OK小伙伴们，这就是Vuex的使用啦，如果你学会了，记得双击评论666哦~