Vuex教程

Posted 2020-10-23 haonanElva

什么是Vuex？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

引入Vuex（前提是已经用Vue脚手架工具构建好项目）

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

 npm install vuex --save

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

import Vue from ‘vue‘;
    import Vuex from ‘vuex‘;

3、使用我们vuex，引入之后用Vue.use进行引用。

Vue.use(Vuex);

通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件（全局引入vuex）

    import storeConfig from ‘./vuex/store‘

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

/* eslint-disable no-new */
new Vue({
    el: ‘#app‘,
    store,
    router,
    template: ‘<App/>‘,
    components: { App }
})

初出茅庐 来个Demo

　　前端项目中，例如头部会有 用户名 和 购物车 数量，这两个属性，这两个属性也就是头部是在多个组件中引用的，同时，购物车数量有在多个地方发生改变，添加购物车，购物车数量加减，删除购物车等等

1、在 vuex 中定义两个属性 一个 nickName 一个 cartCount。

const store = new Vuex.Store({
    state: {
        nickName: ‘‘,
        cartCount: 0
    }
});

 

state 状态只能通过 mutations 改变，改变之后必须通过 commit 去提交改变要不然不会显示（也可以通过 action 提交，比如一步操作必须用这个提交）

定义更新 用户名 这个mutations。同时定义，购物车数量改变的方法。

const store = new Vuex.Store({
    state: {
        nickName: ‘‘,
        cartCount: 0
    },
    mutations: {
        updateUserInfor(state, nickName){
            state.nickName = nickName;
        },
        // 接收传过来的 数字 ，在现有的基础上 +=，加购物车就 传1，减就穿 -1，删除就传 （-当前商品的数量）。
        updateCartCount(state, cartCount){
            state.cartCount += cartCount;
        },
　　　　　　// 购物车初始化，查看购物车的数量，上边那个是改变数量，这个只是查看不改变
        initCartCount(state, cartCount){
            state.cartCount = cartCount;
        }
    }
});

 

2、用export default 封装代码，让外部可以引用。

 export default new Vuex.Store({
        state
    });

3、新建一个vue的模板，位置在components文件夹下，名字叫header.vue。在模板中我们引入我们刚建的store.js文件。

 /**
    * vuex 通过这个计算属性 时时去变化 nickName，nickName在checklogin 的时候去赋值。
    */ 
    computed: {
        nickName(){
            return this.$store.state.nickName;
        },
        cartCount(){
            return this.$store.state.cartCount;
        }
    },

页面中输出

<li style="color: red" v-if="nickName">{{nickName}}，欢迎回来</li>
<span class="cartNum" v-if="nickName && (cartCount>0)">{{cartCount}}</span>

在需要更改 vuex 的状态的地方

例如：调用登录接口，成功之后 接口返回用户名

this.$store.commit("updateUserInfor",res.body.result.userName);

购物车顶部的图标旁边显示购物车数量，这个同样是在登录后调用查看购物车数量，不登录肯定不能知道购物车的数量的

/**
        * 获取购物车数量赋值给 vuex
        */
        getCartCount(){
            this.$http.get(‘/users/getCartCount‘).then((res) => {
                if(res.body.status == 0){
                    this.$store.commit("initCartCount",res.body.result);
                }
            });
        }

删除购物车（传递当前商品的数量）

// 删除购物车时候，通知 vuex 更新数量
                    this.$store.commit("updateCartCount", -this.itemData.productNum);

购物车点击加

this.$store.commit("updateCartCount", 1);

购物车点击减

this.$store.commit("updateCartCount", -1);

vuex 计算属性简写：

例如：在header 的组件中，用户名 和 购物车 数量都需要在这里计算，原本写法是

computed: {
        nickName(){
            return this.$store.state.nickName;
        },
        cartCount(){
            return this.$store.state.cartCount;
        }
    },

vuex 有一套简写的方法，在页面导入 mapState，在需要简写的地方导入

import { mapState } from ‘vuex‘

computed: {
        * mapState 数组里面 填写的参数，就是vuex 要返回的参数，也就是vuex要更新更改的数据
        * 它默认 执行 return this.$store.state.xxxx; xxxx就是数组中我们传入的
        */ 
        ...mapState([‘nickName‘,‘cartCount‘])
    },

 

 

总结；vuex 相当于是把一个变量改为了全局，让我们在所有的地方都能访问到，不管在哪个最近修改了这个属性。