前端数据管理（三）进阶使用Vuex

在因斯坦
276 阅读2分钟

🤗 看到这里相信你一定已经运行起一个基本的带vuex的vue项目了！我们可以在项目的任何地方轻松的访问到仓库里的状态！
接下来我们一起看看它的一些用法

Vuex共有五个核心概念：

  • State
  • Getters
  • Mutations
  • Actions
  • Modules 一个空白的store/index.js结构是这样的：
import Vue from 'vue'; 
import Vuex from 'vuex';
Vue.use(Vuex); 
const store = new Vuex.Store({ 
state: { }, 
getters: { }, 
mutations:{ },
actions:{ }
}); 
export default store;

vuex单一的状态树：State

Vue官网把store称为【Single State Tree（单一状态树）】，它包含我们项目中所有应用程序级别的状态，state即用来存放多个组件的共享状态。

了解修饰器：Getters

和computed相似，方便直接生成一些可以直接使用的数据；
可以试想一个场景，当你已经把store中的name全部展示在界面上，这时项目经理找到你

  • 项目经理：在所有的name前面都给我加上一个Hello！
  • 我：为什么？
  • 项目经理：我提需求还需要为什么吗？
  • 我：好嘞 🤦🏻‍ 这时候你会怎么去实现这个操作呢？是每个页面都找到this.$store.state.name在前面追加一个Hello……？
    🤦🏻‍♂️ 这么做可能你也会觉得很呆，如果下次项目经理又让你把Hello改成F**K，你可能会想狠狠地……给自己来一个大耳刮子！
    🤩 这时候我们就可以巧妙的运用vuex提供的Getter方法辣~
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        name: '张三'
    },
    // 在store对象中增加getters属性
    getters: {
        getName(state) { // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上
            return `hello ${state.name}`;
        }
    },
});

export default store;

在组件中使用：

export default {
    mounted() {
        console.log(this.$store.getters.getName);
    }
}

🤩 此时再查看控制台，天呐你这了不起的家伙又做到了！

getters.png

但是，如果要每个页面都去写this.$store.getters.xxx会令人厌烦！你实在不想写这个东西怎么办！我们可以使用vuex的一个语法糖mapGetters去解构到计算属性中，可以直接使用this调用：

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    mounted() {
        console.log(this.name);
        console.log(this.getName);
    },
    computed: {
        ...mapState(['name']),
        ...mapGetters(['getName']),
    },
}
</script>

如何修改值：Mutations

用于存放更改state里状态的方法，是唯一一个更改状态的属性！ 如果要你去改变state中的name你会怎么修改，是不是第一下想到的是this.$store.state.name = 'xxx'
🤯 达咩！
我们可以随意取store仓库中的数据，但是不能随意更改它，正确方法是通过vuex自带的方法mutations~
但是mutations是同步操作！
同步操作！
同步！
！
现在我们想每次点击按钮btn1，让store中的值count1+1、点击按钮btn2，让store中的值count2+n：

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        name: '张三',
        count1:0,
        count2:0
    },
    mutations: {
    // 不带参数
        setCount1(state) { 
            state.count1 += 1;
        },
     // 带参数函数
     setCount2(state,n) { 
            state.count2 += n;
        }
    },
});

export default store;

<script>
export default {
     // 不带参数
    btn1Click() {
        this.$store.commit('setCount1');
        console.log(`当我按下btn1时候值就变成了：${this.$store.state.count1}`);
    },
         // 带参数调用
    btn2Click(){
        this.$store.commit('setCount2',2);
        console.log(`当我按下btn2时候值就变成了：${this.$store.state.count2}`);
    }
}
</script>

🤩 让我们看看控制台吧！

mutations.png

异步操作：Actions

如果我们需要异步修改state中的数据就会用到Actions了！它存在的意义就是：当我们在修改state数据的时候还有其他异步操作的存在！vuex作者不希望异步操作也在mutations中进行，于是乎Actions诞生！
🤠 有一天张三看腻了自己的脸，决定去理发店剪一个锅盖头，再染一头黄毛！但是不能一边剪发一边染发！我们该怎么处理呢！ 修改store/index.js

const store = new Vuex.Store({
    state: {
        name: '张三',
        length:'long',
        color:'black'
    },
    mutations: {
        setColor(state, payload) {
            state.color = payload.color;
        },
    },
    actions: {   
    // 师傅花了60分钟给张三剪了一个帅气的发型
        cutHair(content) { 
        content.state.length = 'short';
            return new Promise(resolve => {  
                setTimeout(() => {
                    content.commit('setColor', { color: 'yellow' });
                    resolve();
                }, 3600000);
            });
        }
    }
});

async mounted() {
        console.log(`曾经的长度：${this.$store.state.length}`);
        console.log(`曾经的颜色：${this.$store.state.color}`);
        await this.$store.dispatch('cutHair');
        console.log(`如今的长度：${this.$store.state.length}`);
        console.log(`如今的颜色：${this.$store.state.color}`);
},

🤩 让我们看看张三的近况！

actions.png

模块化：Modules

这就是个概念吧

写在最后：
🤩 就像最开始的mapState和mapGetters一样，我们在组件中可以使用mapMutations来代替this.$store.commit('XXX')！

文章参考博主：juejin.cn/user/782508… 感谢！

avatar
文章
阅读
粉丝