vuex的使用,简单明了,大白话教学__Vue.js__前端
发布于 1 个月前 作者 banyungong 139 次浏览 来自 分享
粉丝福利 : 关注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"]),
  },

};

image.png

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'])
},

ba9bad4ba66b11419116887626f636b.png

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哦~

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 老王打码 原文链接:https://juejin.im/post/6991440484908400648

回到顶部