vuex的使用

状态机

状态机的五大核心

主状态机定义

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 子仓库
import userModule from './module.js/userModule';// 
import tagNavModule from './module.js/tagNavModule';// 标签导航

export default new Vuex.Store({
    // 定义数据
    state: {
        name: "qike",
        count: 1, desc: "状态机", listUser: [{ id: 1, name: "张三" }, { id: 2, name: "王五" }],
        objUser: { id: 3, name: "渣渣灰" },

    },
    //计算属性, 用于获取state中的数据，它可以在获取数据时进行计算，把计算后的值返回
    //约定使用此方法暴露数据，不要直接操作数据
    getters: {
        getName(state) {
            return state.desc + "版本号：7.0.1"
        }
    },
    //同步方法：用于获取或是设置state中的数据
    // 约定使用该方法修改数据，不然vue无法监测数据变化
    //  约定方法名全大写
    mutations: {
        ADD_COUNT(state, val) {
            state.count += val;
        }
    },
    //异步方法：用于获取或是设置state中的数据，在actions中可以执行一些异步的任务，
    // 例如调用接口，setTimeout等
    actions: {
        getName2(context, val) {
            let name = "状态机二代目" + new Date().getTime();
            setTimeout(() => {
                context.state.desc = name;
            }, 2000);
        }
    },
    //用于定义子仓库的：模块化状态机
    modules: {
        userModule, tagNavModule
    }
})

子状态机定义

export default {
    // 当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
    namespaced:true,
    // 
    state:{
        userInfo:{
            name:"ZS",
            id:2,
            age:18,
            hobby:['打篮球']
        }
    },
    //
    getters:{
        user_getName(state){
            return state.userInfo.name
        }
    },
    //
    mutations:{
        ADD_AGE(state,val){
            state.userInfo.age+=val;
        }
    },
    //
    actions:{
        addHobby(context,val){
            console.log(context);
            setTimeout(() => {
                context.state.userInfo.hobby.push(val)
            }, 1000); 
        }
    }
}

状态机的使用

在main.js中引入

// 状态机
import store from '@/store/index.js'
const app = new Vue({
	store,
  ...App
})

直接使用 $store 不推介

methods: {
    setTime() {
      	//组件中触发actions中的函数
        this.$store.dispatch("setCurTime", new Date().getTime());
        //在组件的js中触发mutations
        this.$store.commit("INCOME", 1);
    }
}

使用辅助函数

常用mapGetters, mapMutations, mapActions，一般不使用 mapState 没必要。

// 导入主仓库的辅助函数
import { mapGetters, mapMutations, mapActions, createNamespacedHelpers } from 'vuex';
// 导入 userModule 子仓库的辅助函数
let {
    mapGetters: mapUserGetters,
    mapMutations: mapUserMutations,
    mapActions: mapUserActions,
} = createNamespacedHelpers('userModule');

computed: {
     	// 计算属性的辅助函数
        ...mapGetters(['getName']),
        //获取子仓库的计算属性
        ...mapUserGetters(['user_getName']),
    },
methods: {
    	// 方法的辅助函数
    	...mapMutations(['ADD_COUNT']),
        ...mapActions(['getName2']),
        //子仓库
        ...mapUserMutations(['ADD_AGE']),
        ...mapUserActions(['addHobby']),
}