深刻Vuex最佳实践
前言
在开始正文以前先废话一段，我上周写的一篇面试文章竟然火了🤓, 开心了一上午，其实我也才刚开始写文章确定是比不上那些大佬的质量，因此能火我也感到佷意外，很感谢支持个人朋友, 我也会努力花时间在这方面为读者产出更好的文章，不少朋友问是我怎么自学的，你们能够看下个人博客，我有写过本身自学的方法虽说不上多好但也是本身自学这么久的一些好的学习方式，仍是能够给一些学前端不久的小伙伴一些参考，但愿你们加油！javascript
起步
核心概念
好了，如今开始回到正文，在讲Vuex以前咱们先来了解下Vuex是什么？css
❝
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则证状态以一种可预测的方式发生变化html
❞
上面是官方给的解释，其实讲的已经很清楚了，它就是专门为Vue.js开发的一套「集中式状态管理模式的库」，那它解决了什呢？前端
使用Vuex管理数据的好处：vue
-
可以在Vuex 中集中管理共享的数据，便于开发和后期进行维护
-
-
存储在Vuex中的数据是响应式的，当数据发生改变时，视图中的数据也会同步更新
因此基于上面三个优势咱们就能明白，基于Vuex集中管理「共享」的数据，解决了多个组件之间的数据共享问题，而且由于数据是「响应式」的，因此数据变化视图也会更新，因此咱们使用Vuex以后就不须要关注不一样视图(组件)依赖同一状态(数据）的问题， 咱们能够将全部精力放在状态(数据)更新上就能够了，剩下的Vuex会帮咱们解决。java
讲明白Vuex的慨念后，咱们来看下面两张官方给的图node
-
-
-
actions，响应在
view 上的用户输入致使的状态变化
这是一个单项数据流的简单示意图，它的问题在于：ios
因此有了Vuex「集中式状态管理模式`」git
Vuex的核心特性
上图很好的解释了Vuex的特性，在解释图片想要表达的意思以前咱们先来解释下图中出现单词都表明什么角色。github
-
State
❝
State提供惟一的公共数据源，全部共享的数据都要统一放到Store中的State中存储
❞
-
Mutation
❝
Mutation用于修改变动$store中的数据
❞
-
Action
❝
在mutations中不能编写异步的代码，会致使vue调试器的显示出错。 在vuex中咱们可使用Action来执行异步操做。
❞
-
Getter
❝
Getter用于对Store中的数据进行加工处理造成新的数据 它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也随之变化
❞
手动实践
接下来咱们经过实践的方式来体验下上面这张图的完整流程。
tip: 本文章由于是写实践方面，因此代码量会有点多，建议你们边看文章边动手操做。
// 建立一个项目
vue create vuex(你的项目名称)
建立好的以后项目中有个store文件夹下面的index就是你的状态管理库, 接下来咱们体验下完整的vuex状态管理流程。
复制代码
修改index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({ ********
state,
getters,
actions,
mutations
})
复制代码
建立state.js文件
const defaultLevel = '初级前端开发'
const salary = '5000'
const ages = [3, 2, 1, 4, 52, 20, 22, 10];
export default {
defaultLevel,
salary,
ages
}
复制代码
建立mutations.js
const upgrade = (state, newLevel) => {
state.defaultLevel = newLevel
}
const upSalary = (state, newSalary) => {
state.salary = newSalary
}
export default {
upgrade,
upSalary
}
复制代码
建立actions.js
export default {
changeLevel({commit}, newLevel) {
return new Promise((resolve) => {
setTimeout(() => {
commit('upgrade', newLevel)
console.log('打怪升级...');
console.log('打怪升级...');
console.log('打怪升级...');
resolve('升级完成了')
}, 2000);
})
},
}
复制代码
建立getters.js
const filterAge = (state) => (term) => state.ages.filter((age) => age > term)
export default {
filterAge
}
复制代码
「最后的总体目录」
app.js
<template>
<div class="app">
<div class="example1">
<h1>例子1</h1>
<div>目前等级: {{defaultLevel}} 薪资{{salary}}</div>
<button @click="upgradeHandler">升级</button>
</div>
<div class="example2">
<h1>例子2</h1>
<ul>
<li v-for="item in ages" :key="item.toString()">{{item}}</li>
</ul>
<button @click="filterHandler">筛选</button>
<div>
<span>符合条件的数</span>
<ul>
<li v-for="item in newAge" :key='item.toString()'>{{item}}</li>
</ul>
</div>
</div>
</div>
</template>
<script> /* eslint-disable */ import { mapState, mapGetters, mapActions, mapMutation, mapMutations, } from 'vuex' export default { name: 'app', data() { return { newAge: [] } }, computed: { // 在计算属性中经过辅助函数, 将state中的两个数据导出来 ...mapState(['defaultLevel', 'salary', 'ages']), }, methods: { ...mapActions(['changeLevel', 'changeLevel2']), ...mapMutations(['upSalary']), async upgradeHandler() { let ret = await this.changeLevel('中级前端开发') // 等待异步执行的结果 console.log(ret);
setTimeout(() => {
this.upSalary(10000) // 同步代码能够不经过actions的方式
}, 1500);
// this.newAge = this.getAge('10')
},
filterHandler() {
this.newAge = this.$store.getters.filterAge(10)
}
复制代码
} } </script>
复制代码setTimeout(() => {
this.upSalary(10000) // 同步代码能够不经过actions的方式
}, 1500);
// this.newAge = this.getAge('10')
},
filterHandler() {
this.newAge = this.$store.getters.filterAge(10)
}
复制代码<style> .example1 { margin-bottom: 50px; padding-bottom: 30px; border-bottom: 2px solid #000; } </style> 复制代码
最后咱们来看看上面两个例子的效果
例子1
例子2
「建议先动手写下代码再来看效果」
写完上面那些代码相信你们已经体会到了Vuex带来的好处,接下来我用大白话解释下Vuex
❝
Vuex解决上面说的问题，组件(视图)引用state(数据源)展现视图，我经过手动dispatch来触发actions中的方法commit(提交)触发mutations来修改state(数据源)从新渲染数据改变组件(视图)
❞
好了， 如今咱们来写一个todoList案列巩固一下。
方便你们对照代码看效果，能够点这里看实现的效果，源码仓库：
案列
A.初始化案例
能够选择从新初始化一个vuex的项目，也能够用如今这个，咱们就用这个来吧。
而后打开public文件夹建立api文件夹，建立一个list.json文件模拟一下数据，文件代码以下：
[
{
"id": 0,
"info": "Racing car sprays burning fuel into crowd.",
"done": false
},
{
"id": 1,
"info": "Japanese princess to wed commoner.",
"done": false
},
{
"id": 2,
"info": "Australian walks 100km after outback crash.",
"done": false
},
{
"id": 3,
"info": "Man charged over missing wedding girl.",
"done": false
},
{
"id": 4,
"info": "Los Angeles battles huge wildfires.",
"done": false
}
]
复制代码
接着安装下项目所须要的库和插件
$ npm install vue-router axios ant-design-vue babel-plugin-import less-loader node-less --save-dev
复制代码
❝
注意: 若是less版本在3.x以上使用ant-design-vue是会报错的，个人版本是3.10.3报错了对于这个问题issue上有不少人解答，对于不一样的版本环境可能解决的方案不同。
❞
issue地址
个人解决方案: 建立vue.config.js添加以下代码
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions:{
javascriptEnabled: true,
}
}
}
},
}
复制代码
再接着，打开main.js,添加store下的index.js``的引入，以下：
import Vue from 'vue'
import App from './Doto.vue'
import store from './store下的`index.js`'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
import { List, Button, Input, Checkbox} from 'ant-design-vue'
Vue.use(List)
Vue.use(Button)
Vue.use(Input)
Vue.use(Checkbox)
new Vue({
store,
render: h => h(App)
}).$mount('#app')
复制代码
再接着打开store文件夹下的index.js，添加axios请求json文件获取数据的代码，以下：
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
list: [],
inputValue: 'Beige'
},
mutations: {
initList(state, list) {
state.list = list
},
setInputValue(state,value){
state.inputValue = value
}
},
actions: {
getList(context) {
axios.get('api/list.json').then(({ data }) => {
console.log(data);
context.commit('initList', data)
})
}
}
})
复制代码
最后，建立Doto.vue并配置路由， 将store中的数据获取并展现：
<template>
<div class="doto">
<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange" />
<a-button type="primary">添加事项</a-button>
<a-list bordered :dataSource="list" class="dt_list">
<a-list-item slot="renderItem" slot-scope="item">
<!-- 复选框 -->
<a-checkbox :checked="item.done">{{item.info}}</a-checkbox>
<!-- 删除连接 -->
<a slot="actions">删除</a>
</a-list-item>
<!-- footer区域 -->
<div slot="footer" class="footer">
<!-- 未完成的任务个数 -->
<span>0条剩余</span>
<!-- 操做按钮 -->
<a-button-group>
<a-button type="primary">所有</a-button>
<a-button>未完成</a-button>
<a-button>已完成</a-button>
</a-button-group>
<!-- 把已经完成的任务清空 -->
<a>清除已完成</a>
</div>
</a-list>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'app',
data() {
return {
// list:[]
}
},
created(){
// console.log(this.$store);
this.$store.dispatch('getList')
},
methods:{
handleInputChange(e){
// console.log(e.target.value)
this.$store.commit('setInputValue',e.target.value)
}
},
computed:{
...mapState(['list','inputValue'])
}
}
</script>
<style scoped>
.doto {
margin: 20px 50px;
}
.my_ipt {
width: 500px;
margin-right: 10px;
}
.dt_list {
width: 500px;
margin-top: 10px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
复制代码
B.完成添加事项
首先，打开Doto.vue文件，给“添加事项”按钮绑定点击事件也能够给表单添加键盘事件，编写处理函数
//绑定事件
<a-button type="primary" @click="addItemToList">添加事项</a-button>
<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange" @keydown.enter="addItemToList"/>
//编写事件处理函数
methods:{
......
addItemToList(){
//向列表中新增事项
if(this.inputValue.trim().length <= 0){
return this.$message.warning('文本框内容不能为空')
}
this.$store.commit('addItem')
}
}
复制代码
而后打开store下的index.js编写addItem
export default new Vuex.Store({
state: {
//全部任务列表
list: [],
//文本输入框中的值
inputValue: 'AAA',
//下一个id
nextId:5
},
mutations: {
........
//添加列表项
addItem(state){
const obj = {
id :state.nextId,
info: state.inputValue.trim(),
done:false
}
//将建立好的事项添加到数组list中
state.list.push(obj)
//将nextId值自增
state.nextId++
state.inputValue = ''
}
}
......
})
复制代码
C.完成删除事项
首先，打开Doto.vue文件，给“删除”按钮绑定点击事件，编写处理函数
//绑定事件
<a slot="actions" @click="removeItemById(item.id)">删除</a>
//编写事件处理函数
methods:{
......
removeItemById(id){
//根据id删除事项
this.$store.commit('removeItem',id)
}
}
复制代码
而后打开store下index编写removeItem
export default new Vuex.Store({
......
mutations: {
........
removeItem(state,id){
const index = state.list.findIndex( x => x.id === id )
if(index != -1) state.list.splice(index,1);
}
}
......
})
复制代码
D.完成选中状态的改变
首先，打开Doto.vue文件，给“复选”按钮绑定点击事件，编写处理函数
//绑定事件
<a-checkbox :checked="item.done" @change="cbStateChanged(item.id,$event)">{{item.info}}</a-checkbox>
//编写事件处理函数
methods:{
......
cbStateChanged(id,e){
//复选框状态改变时触发
const param = {
id:id,
status:e.target.checked
}
//根据id更改事项状态
this.$store.commit('changeStatus',param)
}
}
复制代码
而后打开store下的index.js编写changeStatus
export default new Vuex.Store({
......
mutations: {
........
changeStatus(state,param){
//根据id改变对应事项的状态
const index = state.list.findIndex( x => x.id === param.id )
if(index != -1) state.list[index].done = param.status
}
}
......
})
复制代码
E.剩余项统计
打开store下的index.js，添加getters完成剩余项统计
getters:{
unDoneLength(state){
const temp = state.list.filter( x => x.done === false )
console.log(temp)
return temp.length
}
}
复制代码
打开Doto.vue，使用getters展现剩余项
//使用映射好的计算属性展现剩余项
<!-- 未完成的任务个数 -->
<span>{{unDoneLength}}条剩余</span>
//导入getters
import { mapState,mapGetters } from 'vuex'
//映射
computed:{
...mapState(['list','inputValue']),
...mapGetters(['unDoneLength'])
}
复制代码
F.清除完成事项
首先，打开Doto.vue文件，给“清除已完成”按钮绑定点击事件，编写处理函数
<!-- 把已经完成的任务清空 -->
<a @click="clean">清除已完成</a>
//编写事件处理函数
methods:{
......
cleanDone(){
//清除已经完成的事项
this.$store.commit('cleanDone')
}
}
复制代码
而后打开store下的index.js编写cleanDone
export default new Vuex.Store({
......
mutations: {
........
cleanDone(state){
state.list = state.list.filter( x => x.done === false )
}
}
......
})
复制代码
G.点击选项卡切换事项
打开Doto.vue，给“所有”，“未完成”，“已完成”三个选项卡绑定点击事件，编写处理函数 并将列表数据来源更改成一个getters。
<a-list bordered :dataSource="infoList" class="dt_list">
......
<!-- 操做按钮 -->
<a-button-group>
<a-button :type="viewKey ==='all'?'primary':'default'" @click="changeList('all')">所有</a-button>
<a-button :type="viewKey ==='undone'?'primary':'default'" @click="changeList('undone')">未完成</a-button>
<a-button :type="viewKey ==='done'?'primary':'default'" @click="changeList('done')">已完成</a-button>
</a-button-group>
......
</a-list>
//编写事件处理函数以及映射计算属性
methods:{
......
changeList( key ){
//点击“所有”，“已完成”，“未完成”时触发
this.$store.commit('changeKey',key)
}
},
computed:{
...mapState(['list','inputValue','viewKey']),
...mapGetters(['unDoneLength','infoList'])
}
复制代码
打开store下的index.js，添加getters，mutations，state
export default new Vuex.Store({
state: {
......
//保存默认的选项卡值
viewKey:'all'
},
mutations: {
......
changeKey(state,key){
// 当用户点击“所有”，“已完成”，“未完成”选项卡时触发
state.viewKey = key
}
},
......
getters:{
.......
infoList(state){
if(state.viewKey === 'all'){
return state.list
}
if(state.viewKey === 'undone'){
return state.list.filter( x => x.done === false )
}
if(state.viewKey === 'done'){
return state.list.filter( x => x.done === true )
}
}
}
})
复制代码
Vuex原理解析
好了, 通过上面的案列相信你们已经对Vuex的使用了解的差很少了，接下来咱们来说下Vuex它的原理是这么样的?
Vuex的原理关键: 使用Vue实例来管理状态
咱们先来看下效果：
接下来仍是经过代码的形式来解析下Vuex内部的原理
<html>
<head>
<title>vuex 原理解析</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="root">{{data}}</div>
<div id="root2">{{data2}}</div>
<div id="root3">
<button @click="change">change</button>
</div>
<script>
function registerPlugin(Vue) {...}
Vue.use(registerPlugin)
new Vue({
el: '#root',
computed: {
data() {
return this.$store.state.message
}
}
})
new Vue({
el: '#root2',
computed: {
data2() {
return this.$store.state.message
}
}
})
new Vue({
el: '#root3',
methods: {
change() {
const newValue = this.$store.state.message + '.'
this.$store.mutations.setMessage(newValue)
}
}
})
</script>
</body>
复制代码
模仿Vuex源码实现
<script>
function registerPlugin(Vue) {
const vuex = {}
vuex._vm = new Vue({
data: {
message: 'hello vue.js'
}
})
vuex.state = vuex._vm
vuex.mutations = {
setMessage(value) {
vuex.state.message = value
}
}
function init() {
this.$store = vuex
}
Vue.mixin({
beforeCreate: init
})
}
</script>
复制代码
写在最后
由于是是实践文，因此这整篇文章都是经过代码的方式来说的，对于一些概念性和基础性语法的东西讲的比较少。若是 这篇文章对你有帮助请点个赞🤓
看完两件小事
若是你以为个人文章对你挺有帮助，我想请你帮我两个小忙：
-
-
「关注公众号「前端自学驿站」」，全部文章、资料第一时间首发公众号，公众号后台回复「
「教程」」 免费领取我精心整理的前端视频教程
