vue全家桶之Vuex、五大核心辅助函数和非辅助函数的使用

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。相当于自己的一个cookie，但是页面一刷新数据就变成初始化的原数据了。

        Vuex五大核心概念：

1. State：单一状态树,可以理解成仓库，页面刚加载时的初始数据；
2. Mutation：更改 Vuex 的 store 中的状态的唯一方法；
3. Getter：可以认为是 store 的计算属性；
4. Action：Action 类似于mutation,但有区别。Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作；
5. Module：模块；可以理解成分仓库，每个分仓库和主仓库的组成一模一样的，都拥有自己的 state、mutation、action、getter、modules；这个意义在于，可以根据你的逻辑把初始数据分成不同的模块，当然这个是非必要的。

一、下载

npm install --save vuex

二、配置

        1、首先建立文件夹store，下面建立index.js(本文为介绍modules，在store文件夹又建立了modules文件夹，下面建立了modulesA.js，不想了解的可以省略)

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import modulesA from "./modules/modulesA"  //不用modules省略
// import router from '../router/router'  //和路由建立连接
Vue.use(Vuex)
const store = new Vuex.Store({
    state: { //仓库
		hasLogin: false,
		userInfo:[],
        num:0
	},
	mutations: { //只能是同步执行
		login(state,userInfo) {
			state.hasLogin = true;
			state.userInfo = userInfo;
		},
		logout(state) {
			state.hasLogin = false
			state.userInfo = []
		},
        up(state,s){
            state.num +=s
        },
        down(state,s){
            state.num -=s
        }
	},
	getters: { //实时更新
        returnL(state){
            var a
            if(state.hasLogin){
                a="登录状态"
            }else{
                a="退出状态"
            }
            return a
        }
	},
	actions: { //可同步，可异步
		add(context,s){
            context.commit('up',s)
            console.log("add")
        },
        reduce(context){
            var s=5
            context.commit('down',s)
            // setTimeout(()=>{  //5秒钟后跳转
            //     router.push({path:"/E"})
            // },5000)
        }

	},
    modules: { //可以理解成分仓库，每个分仓库都有state、mutations等，不用modules省略,
        modulesA
    }
})

export default store

        2、modulesA.js(主要介绍modules的用法，不想了解的可以省略)

//modules/modulesA.js
export default {
    namespaced: true,
    state: {
      active: "大大大大"
    },
    mutations: { //只能同步
        modulesA_mutations(state,){
            state.active="小小小小"
        },
        up(state,n){
            state.active=n
        }
    },
    getters: { //实时更新
        returnLA(state){
            return state.active
        }
	},
    actions: { //可同步，可异步
		modulesA_actions(context,s){
            context.commit('up',s)
        }
	},
    
  }

        2、main.js引入

import store from './store/index.js'
new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

三、使用

        可以使用辅助函数，也可以使用非辅助函数，功能一样，只是语法不同，记住一样即可

总结

        1、辅助函数按需引用；

import { mapState, mapMutations, mapGetters, mapActions } from "vuex";

//computed里面辅助函数是 mapState和mapGetters,例如
  computed: {
    ...mapState(["hasLogin", "userInfo", "num"]),
    ...mapGetters(["returnL"]),
  },

//methods里面辅助函数是 mapMutations 和mapActions，例如
    methods: {
        ...mapMutations(["login", "logout"]),
        ...mapActions(["add", "reduce"]),
    }

        2、不管是mutations还是actions里面的方法都可以在页面直接调用，不用写在methods里面，也可以直接传参

        3、主仓库函数和modulesA仓库的用法很相似，modulesA的辅助函数要加仓库名称，非辅助函数需要   "仓库名称/函数名称"

    //主仓库辅助函数
    ...mapMutations(["login", "logout"]),
    //modulesA仓库辅助函数
    ...mapMutations("modulesA", ["modulesA_mutations"]),

    //主仓库非辅助函数
    this.$store.dispatch("add", 10);
    //modulesA仓库非辅助函数
    this.$store.dispatch("modulesA/modulesA_actions", "666");

        4、还有一种更为简单的方法，引入createNamespacedHelpers，就可以像使用主仓库那样，不用加仓库名称

import { createNamespacedHelpers } from 'vuex'
const { mapState,mapGetters} = createNamespacedHelpers('modulesA/')

  computed: {
    ...mapState(["active"]),  //直接写函数名即可
    ...mapGetters(["returnLA"]),
  },