备注：此案例是用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>
网友评论