备注:此案例是用vue脚手架创建的demo
1、首先要知道什么是Vuex?
在Vue官方网站的解释是: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
2、使用Vuex时,常见的关键词
1、store:仓库容器, 包含应用中大部分的状态 (state)
2、state:数据状态
3、mutations:更改 Vuex 的 store 中状态的唯一方法是提交 mutation
4、commit: 调用 store.commit 方法,触发 mutation
5、mapState:借助mapState辅助函数获取store中保存的状态,避免当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性时代码冗余
3、组件及模块的分配
1、main.js:主模块
2、store.js:管理仓库
3、state.js:数据状态
4、mutations.js:更改 Vuex 的 store 中数据状态
5、template.vue:组件渲染
备注:为了方便以后代码的修改,我将state和mutations从store中抽离出来,单独做了模块,使用时直接在store中引用
4、Vuex的使用
(1)、安装vuex,在工作目录下执行命令:
npm install vuex --save
(2)、创建store,状态管理仓库:store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import state from 'state.js路径'
import mutations from 'mutations.js路径'
const store = new Vuex.Store({
state,mutations
})
export default store
(3)、创建state.js
//定义状态管理数据
//user 记录用户的登录信息
const state = {
user:localStorage.user?JSON.parse(localStorage.user):'',
}
export default state
(4)创建mutations.js
//更改 Vuex 的 store 中状态的唯一方法是提交 mutation,Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
const mutations = {
onLogin(state){ //更改state中的user数据
state.user = JSON.parse(localStorage.user);
},
}
export default mutations
(5)、在main.js中引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from 'store.js路径'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
template: '<App/>'
components: { App }
})
(6)、在template.vue组件中使用
<template>
<div class='app-footer'>
<div v-if='_user'>
<span>购物车</span>
</div>
<button @click="onToLogin">立即登录</button>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default{
name:' app-footer ',
/*
//方法1
computed:{//计算属性,动态获取state数据
user(){
return this.$store.state.user;
},
},
*/
/*
//方法2
//当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性,方法1会产生代码冗余,可以借助mapState辅助函数获取store中保存的状态
computed:mapState(['user']),
*/
/*
//方法3
//方法2中,当组件本身的数据名与state中的数据名重复时,这时很容易造成数据混乱,为了不破坏state中原有的数据,在使用mapState函数时可以传入一个对象,给state数据起一个别名
computed:mapState({
//_user:'user', //方法1:key-value键值对形式,key为别名,value为state里对应的数据
_user(state){ //方法2:函数形式,函数名为别名,参数为state,返回值为state里对应的数据名
return state.user;
}
}),
*/
//方法4
//如果我们在组件中有很多自己的业务逻辑需要计算属性,我们可以用对象展开运算符
computed:{
userStr(){//自己的业务逻辑
return JSON.stringify(this.$store.state.user);
},
...mapState({//展开运算符,获取state数据
_user(state){
return state.user;
},
}),
},
methods:{//登录事件,更改state的user信息
onToLogin(){
localStorage.user = JSON.stringify({nick:'FamilyLi',user:'Hello',id:1})
this.$store.commit('onLogin');//注意,这里的参数应该对应mutations里的事件属性
}
},
}
</script>