目录
vuex是什么
-
vuex 的五个核心概念
State 定义状态(变量)
Getter 获取状态(变量的值)
Mutation 修改状态(修改变量的值)
Action 触发 mutation 函数,从而修改状态
Module 当状态很多时,把状态分开来管理
通过vuex进行跨组件通信
vuex 本地持久化
(一) vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态: 本质上就是一个变量,赋予不同的值就是不同的状态,管理状态实际上就是管理一堆变量
响应式,vuex跟全局变量不同,修改了vuex的某个状态,依赖这个状态的视图都会发生改变
(二) vuex的5个核心概念
1. State 定义状态(变量), 辅助函数mapState
Getter 获取状态(变量的值),同时可以对状态进行处理, 辅助函数mapGetters
Mutation 修改状态(修改变量的值)
Action 触发 mutation 函数,从而修改状态,支持异步
Module 当状态很多时,把状态分开来管理
(三) 配置vuex
-
安装vuex
npm i vuex
-
vuex配置
在根目录新建/store/index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const config = { // 定义状态 state: { isLogin: false }, // getters getters: { // isLogin:(state) =>{ // return state.isLogin; // }, // 等同上面的写法 isLogin: state => state.isLogin }, // 修改state里面的变量 mutations: { // state指向上面的state,payload是调用muation时传过来的参数 updateLogin(state, payload) { state.isLogin = payload; } }, // action行为 actions: { }, // module modules: { } } export default new Vuex.Store(config); -
在main.js导入并挂载到vue的实例上
mport Vue from 'vue' import App from './App.vue' import store from './store/index' Vue.config.productionTip = false new Vue({ store, render: h => h(App), }).$mount('#app')
(四) 获取在vuex定义的状态
-
通过this.$store.state.xxx 来取,具体使用
created() { console.log(this.$store.state.isLogin); console.log(this.$store.state.firstName); } // 通常我们会定义计算属性来取值,比如 computed: { // 自定义计算属性 isLogin() { // 获取vuex的isLogin的值 return this.$store.state.isLogin } } -
通过辅助函数mapState来获取
data() { return { addr: '广西' }; }, computed: mapState({ // 取state里count的值 count: 'count', // 取state里count的值,用countAlias变量接收 countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 fullName(state) { return this.addr + state.firstName + state.lastName; } }) // 如果需要定义其它的计算属性,就按照下面的写法 computed: { // 其他的计算属性 total() { return 500 }, ...mapState({ // 取state里count的值 count: 'count', // 取state里count的值,用countAlias变量接收 countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 fullName(state) { return this.addr + state.firstName + state.lastName; } }) } -
通过getters和mapGetters来取
// 定义一个用来获取fullName的getter
getters: {
fullName(state) {
return state.firstName + state.lastName;
}
},
// 通过mapGetters
import {mapGetters} from 'vuex';
computed: {
fullName() {
return this.$store.getters.fullName;
}
}
(五) 修改state中的状态
- 定义state和mutation
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name: "没名字",
count: 1
},
getters: {
},
// 修改state里的值必须通过mutation来修改
mutations: {
/**
* 定义一个修改name的mutation
* state是上面的定义的state
* payload是新的数据
*/
updateName(state, payload) {
state.name = payload;
}
}
})
- 在需要的时候调用mutation进行修改state里的name状态
// 第一个参数是mutation的名字,第二参数是要修改成的数据
this.$store.commit('updateName','老胡');
(六) 综合例子: 通过vuex实现加减
- 在vuex里配置state和mutation
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
addOne(state, payload) {
state.count = state.count + 1;
},
minusOne(state, payload) {
if (state.count > 0) {
state.count = state.count - 1;
}
}
}
})
- index.vue的配置
<template>
<div>
<button @click="minus">-</button>
<span>{{count}}</span>
<button @click="add">+</button>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: mapState({
count: "count"
}),
methods: {
add() {
this.$store.commit("addOne");
},
minus() {
this.$store.commit("minusOne");
}
}
};
</script>
(六) vuex 本地持久化
当刷新页面,项目重新加载,vuex 会重置,所有状态回到初始状态,使用 vuex-persistedstate 可以避免这种情况
- 安装 vuex-persistedstate
npm i vuex-persistedstate - 在vuex中,添加plugins
// 具体例子如下import createPersistedState from 'vuex-persistedstate' plugins: [createPersistedState()],
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
// 导入模块
import login from './module/login'
import my from './module/my'
Vue.use(Vuex);
export default new Vuex({
plugins: [createPersistedState()],
// 模块
modules: {
login,
my
},
state: {
isLogin: false,
username: '',
token: ''
},
getters: {
isLogin: state => state.isLogin,
token: state => state.token,
username: state => state.username
},
mutations: {
updateLogin(state, payload) {
state.isLogin = payload;
},
updateToken(state, payload) {
state.token = payload;
},
updateUsername(state, payload) {
state.username = payload;
}
},
actions: {
LoginAction({commit}, payload) {
commit('updateLogin',payload)
},
TokenAction({commit}, payload) {
commit('updateToken',payload)
},
UsernameAction({commit}, payload) {
commit('updateUsername',payload)
},
}
})
(七) modules的使用
- 配置模块的vuex
export default {
state: {
cartNum: 10
},
getters: {
},
mutations: {
updateCartNum(state, payload) {
state.cartNum = payload;
}
},
actions: {
}
}
- 获取状态
<template>
<div>{{cartNum}}</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: mapState({
cartNum(state) {
return state.cart.cartNum;
}
})
};
</script>
- 修改状态
this.$store.commit("updateCartNum", 200);
(八) acion
Action 类似于 mutation，都是用来修改vuex的状态, 不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
- 配置action
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 10
},
mutations: {
updateNum(state, payload) {
state.num = payload;
}
},
actions: {
/**
* 修改num的action
* @param {*} ctx 可以拿到一个类似store的实例
* @param {*} payload 修改的数据
*/
updateNum(ctx, payload) {
setTimeout(() => {
ctx.commit('updateNum', payload);
}, 3000)
}
}
})
- 派发action,在需要的地方,调用以下方法
this.$store.dispatch("updateNum", 500);
image
