|
????????Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。相当于自己的一个cookie，但是页面一刷新数据就变成初始化的原数据了。Vuex五大核心概念：
- State：单一状态树,仓库；
- Mutation：更改 Vuex 的 store 中的状态的唯一方法；
- Getter：可以认为是 store 的计算属性；
- Action：Action 类似于mutation,但有区别。Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作；
- 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')
三、使用
????????可以使用辅助函数，也可以使用非辅助函数，功能一样，只是语法不同，记住一样即可
<template>
<div id="box">
<div>
<h1>主仓库</h1>
<div>
仓库初始hasLogin的值: <span style="color: red">{{ hasLogin }}</span>
</div>
<div>
getters里面returnL: <span style="color: blue"> {{ returnL }}</span>
</div>
<div>
<p>调用mutations</p>
<button @click="deng">登录</button>
<button @click="tui">退出</button>
</div>
<div>
<p>调用actions</p>
<button @click="add(10)">+</button>{{ num }}
<button @click="reduce">-</button>
</div>
</div>
<div>
<h1>modulesA仓库</h1>
<p>
仓库初始active的值: <span style="color: red">{{ active }}</span>
</p>
<p>
returnLA: <span style="color: blue">{{ returnLA }}</span>
</p>
<div>
<p>调用mutations</p>
<button @click="modulesA_mutations">modulesA_mutationsA</button>
</div>
<div>
<p>调用actions</p>
<button @click="modulesA_actionsA">modulesA_actions</button>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
components: {},
data() {
return {};
},
computed: {
//主仓库辅助函数
...mapState(["hasLogin", "userInfo", "num"]),
...mapGetters(["returnL"]),
// returnL(){ //主仓库不用辅助函数
// return this.$store.getters.returnL
// }
//modulesA仓库辅助函数
...mapState("modulesA", ["active"]),
...mapGetters("modulesA", ["returnLA"]),
// returnLA() { //modulesA仓库不用辅助函数
// return this.$store.getters["modulesA/returnLA"];
// },
},
created() {},
methods: {
//主仓库辅助函数和非辅助函数用法
...mapMutations(["login", "logout"]),
...mapActions(["add", "reduce"]),
deng() {
this.login([{ id: 1, name: 555 }]); //用辅助函数调用 mutations login 方法
// this.$store.commit("login", [{ id: 1, name: 555 }]); //不用辅助函数调用 mutations login 方法
this.$store.dispatch("add", 10); //不用辅助函数调用 actions add 方法
},
tui() {
this.logout(); //用辅助函数调用 actions logout 方法
// this.$store.commit("logout"); //不用辅助函数调用 actions logout 方法
this.$store.dispatch("reduce");//不用辅助函数调用 actions reduce 方法
},
//modulesA仓库辅助函数和非辅助函数用法
...mapMutations("modulesA", ["modulesA_mutations"]),
...mapActions("modulesA", ["modulesA_actions"]),
modulesA_actionsA() {
// this.$store.commit("modulesA/modulesA_mutations") //用辅助函数调用 mutations modulesA_mutations 方法
this.$store.dispatch("modulesA/modulesA_actions", "666"); //不用辅助函数调用 actions modulesA_actions 方法
},
},
};
</script>
<style scoped>
#box{
display: flex;
justify-content: center;
text-align: center;
}
#box>div{
flex: 1;
}
</style>
总结
? ? ? ? 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"]),
},
|