1.什么是vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.
2.它由五部分组成:
分别是:state,actions,mutations,getters,modules
2.1 state: 数据
2.2 actions:可以包含异步操作
2.3 mutations: 唯一可以修改state数据的场所
2.4 getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)
2.5 modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation、action、getter
3.在store文件的index.js使用
import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
const state= ()=>{ token:''}
const actions = {
set_token({commit},val){
commit("to_token",val)
}
}
const mutations = {
to_token(state,val){
state.token=val;
}
}
const getters = {}
let store = new Vuex.store({
state,
actions,
mutations,
getters
})
module.export=store;
在home.vue
<template>
<div>
{{$store.state.token}}
</div>
</template>
<script>
export default={
name: 'Home',
data() {
return {
tel: '',
}
},
created(){
//调用acionts中的方法
this.$store.dispatch('set_token',12345);
//调用mutations中的方法
this.$store.commit('to_token',123456)
}
}
<script>
方法使用须知
1. 只有commit()才可以触发mutations中的方法 (可以在组件中调用,也可以在actions中调用)
2. 只有dispatch()才可以触发actions中的方法 (只能在组件中调用)
3. vuex 是单向数据流
4. 只有mutations才可以修改state中数据。
5. Es6 规范:
导入模块 ---> import xxx from '路径'
导出模块 ---> export default {}
小小的注意:可以用es6中的解构赋值(按需导入)语法
import { modea,modeb } from '/home/xxx.js'
A: 公用的方法库, export default { a:functin(){},b:function(),c:function(){}}
B:import { c } from '/A.js'
c()
commomjs规范(nodejs)
导入模块: require('路径')
导出模块: module exports { }
- 高级用法–数据持久化
4.1 安装
npm install vuex-persistedstate
4.2 在store.js中引用
import createPersistedState from 'vuex-persistedstate'
const state = {
user:{},
}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});
5.高级语法-模块化管理数据
1.什么时候需要用到模块
管理vuex数据
项目庞大,数据信息量特别大的时候,我们可以考虑分模块形式管理数据,比如user模块管理用户信息数据,cart模块管理购物车数据,shop模块管理商品信息数据。
import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
const state= ()=>{ token:''}
const actions = {
set_token({commit},val){
commit("to_token",val)
}
}
const mutations = {
to_token(state,val){
state.token=val;
}
}
const getters = {}
//user模块
let user = {
namespaced: true, //一定要开始命名空间。
state: { userid: 1234 },
actions: {
},
mutations: {
SET_USERID(state, val) {
state.userid = val;
}
},
getters: {
}
}
//购物车数据的模块
let cart = {
namespaced: true,
state: { userid: 567 },
actions: {
},
mutations: {
},
getters: {
}
}
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
modules: {
user,
cart
},
plugins: [createPersistedState({
storage: sessionStorage,
key: "token"
})]//会自动保存创建的状态。刷新还在
})
export default store
home.vue
获取user模块的`userid`
this.$store.state.user.userid
this.$store.commit("SET_USERID",12345)
6.高级用法-辅助函数(语法糖)
1.有几个辅助函数(4大金刚)
mapState,mapActions,mapMutation,mapGetters
2.辅助函数可以把vuex
中的数据和方法映射到vue组件中
。打到简化操作的目的
3.如何使用
home.vue
<template>
<div id="">
{{ token }}
{{ token - x }}
</div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import {createNamespacedHelpers} from 'vuex'
const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')
const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')
export default {
name: '',
data() {
return {}
},
computed: {
...mapState({
token: 'token'
}),
...mapGetters(['token-x']),
...mapSateUser(['userid']),
...mapStateCart({cartid:'userid'})
},
//生命周期 - 创建完成(访问当前this实例)
created() {
this.setToken('123456')
},
//生命周期 - 挂载完成(访问DOM元素)
mounted() {},
methods: {
...mapActions({
setToken: 'setToken'
}),
...mapMutations(['SET_TOKEN']),
...mapMutaionUser({
setId:"setToken"
})
}
}
</script>