代码下载
Vuex 概述
组件之间共享数据的方式：
- 父组件向子组件传值，是以属性的形式绑定值到子组件（v-bind），然后子组件用属性props接收。
- 子组件向父组件传值，子组件用 $emit() 自定义事件，父组件用v-on监听子组件的事件。
- 兄弟组件的传值，通过事件中心传递数据，提供事件中心
var hub = new Vue()，传递数据方通过一个事件触发hub.$emit(方法名，传递的数据)，接收数据方通过在mounted(){}钩子中 触发hub.$on(方法名, 传递的数据)。
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。使用Vuex管理数据的好处：
- 能够在vuex中集中管理共享的数据，便于开发和后期进行维护
- 能够高效的实现组件之间的数据共享，提高开发效率
- 存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新
一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。
Vuex 简单使用
1、安装 vuex 依赖包
npm install vuex --save
2、导入 vuex 包
import Vuex from 'vuex'
Vue.use(Vuex)
3、创建 store 对象
const store = new Vuex.Store({
// state 中存放的就是全局共享的数据
state: { count: 0 }
})
4、 将 store 对象挂载到 vue 实例中
new Vue({
el: '#app',
render: h => h(app),
// 将创建的共享数据对象，挂载到 Vue 实例中
// 所有的组件，就可以直接从 store 中获取全局的数据了
store
})
在使用 vue 脚手架创建项目时，可以在功能选项中直接开启使用 Vuex 的开关。
Vuex 的核心概念
Vuex 中的主要核心概念如下：State，Mutation，Action，Getter。
State
State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
// 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
state: { count: 0 }
})
组件访问 State 中数据的第一种方式：this.$store.state.全局数据名称
组件访问 State 中数据的第二种方式：
1、从 vuex 中按需导入 mapState 函数：
import { mapState } from 'vuex'
2、通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：
computed: {
...mapState(['count'])
}
Mutation
Mutation 用于变更 Store中 的数据。
注意：只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
定义 Mutation，也可以在触发 mutations 时传递参数：
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
state.count++
},
addN(state, step) {
state.count += step
}
}
})
组件触发 mutations 的第一种方式：this.$store.commit('add') 、 this.$store.commit('add', 3)。
组件触发 mutations 的第二种方式：
1、从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'
2、通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法
methods: {
...mapMutations(['add', 'addN'])
}
Action
Action 用于处理异步任务。如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。
定义 Action，也可以在触发 actions 异步任务时携带参数：
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000);
},
addNAsync(context, step) {
setTimeout(() => {
context.commit('addN', step)
}, 1000);
}
}
触发 actions 的第一种方式：this.$store.dispatch('addSsync')、this.$store.dispatch('addAsync', 3)。
触发 actions 的第二种方式：
1、从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'
2、通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：
methods: {
...mapActions(['addASync', 'addNASync'])
}
Getter
Getter 用于对 Store 中的数据进行加工处理形成新的数据，类似 Vue 的计算属性。Store 中数据发生变化，Getter 的数据也会跟着变化。
定义 Getter：
export default new Vuex.Store({
state: {
count: 0
},
getters: {
showNum(state) {
return '当前最新数量是：' + state.count
}
}
}
使用 getters 的第一种方式：this.$store.getters.showNum。
使用 getters 的第二种方式：
1、从 vuex 中按需导入 mapGetters 函数
import { mapGetters } from 'vuex'
2、通过刚才导入的 mapGetters 函数，将需要的 getters 函数，映射为当前组件的 computed 计算属性：
computed: {
...mapGetters(['showNum'])
}
示例
1、在 store > index.js 中创建 store 对象，并定义相应的 state、mutations、actions、getters：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
getters: {
showNum(state) {
return '当前最新数量是：' + state.count
}
},
mutations: {
add(state) {
state.count++
},
addN(state, step) {
state.count += step
},
sub(state) {
state.count--
},
subN(state, step) {
state.count -= step
}
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000);
},
addNAsync(context, step) {
setTimeout(() => {
context.commit('addN', step)
}, 1000);
},
subAsync(context) {
setTimeout(() => {
context.commit('sub')
}, 1000);
},
subNAsync(context, step) {
setTimeout(() => {
context.commit('subN', step)
}, 1000);
}
},
modules: {
}
})
2、在 components > addition.vue 文件中，运用第一种方法使用 state、mutations、actions、getters：
<template>
<div>
<h3>计算结果：{{$store.state.count}}</h3>
<button @click="btnHandle1">+1</button>
<div>
<input type="number" placeholder="请输入数值" v-model.number="addNum">
<button @click="btnHandleN">+{{addNum}}</button>
</div>
<button @click="btnHandle1Async">+1 async</button>
<div>
<input type="number" placeholder="请输入数值" v-model.number="addNumAsync">
<button @click="btnHandleNAsync">+{{addNumAsync}}</button>
</div>
<h3>{{$store.getters.showNum}}</h3>
</div>
</template>
<script>
export default {
data() {
return {
addNum: 2,
addNumAsync: 3
}
},
methods: {
btnHandle1() {
this.$store.commit('add')
},
btnHandleN() {
this.$store.commit('addN', this.addNum)
},
btnHandle1Async() {
this.$store.dispatch('addAsync')
},
btnHandleNAsync() {
this.$store.dispatch('addNAsync', this.addNumAsync)
}
}
}
</script>
3、在 components > subtraction.vue 文件中，运用第二种方法使用 state、mutations、actions、getters：
<template>
<div>
<h3>计算结果：{{count}}</h3>
<button @click="btnHandle1">-1</button>
<div>
<input type="number" placeholder="请输入数值" v-model.number="subNum">
<button @click="btnHandleN">-{{subNum}}</button>
</div>
<button @click="subAsync">-1 async</button>
<div>
<input type="number" placeholder="请输入数值" v-model.number="subNumAsync">
<button @click="subNAsync(subNumAsync)">-{{subNumAsync}} async</button>
</div>
<h3>{{showNum}}</h3>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
data() {
return {
subNum: 2,
subNumAsync: 3
}
},
computed: {
...mapState(['count']),
...mapGetters(['showNum'])
},
methods: {
...mapMutations(['sub', 'subN']),
btnHandle1() {
this.sub()
},
btnHandleN() {
this.subN(this.subNum)
},
...mapActions(['subAsync', 'subNAsync'])
}
}
</script>
Vuex 案例
项目初始化
1、通过 vue ui 命令打开可视化面板，创建新项目（略，这里使用的是和上面示例同一个项目）。
2、安装依赖包：npm install axios、npm install ant-design-vue@1.7.8，因为这里使用的 vue2.x，所以 ant-design-vue 版本使用1.7.8。
注意：需要在 package.json 文件中将
eslint-plugin-vue版本改为7.0.0"eslint-plugin-vue": "^7.0.0"，否则会与ant-design-vue有版本冲突。
打开 main.js 导入并配置相应的组件库：
// 1. 导入 ant-design-vue 组件库
import Antd from 'ant-design-vue'
// 2. 导入组件库的样式表
import 'ant-design-vue/dist/antd.css'
// 3. 安装组件库
Vue.use(Antd)
3、实现 Todos 基本布局，在 components 文件夹中新建 toDoList.vue 文件，并实现布局代码：
<template>
<div id="app">
<a-input placeholder="请输入任务" class="my_ipt" />
<a-button type="primary">添加事项</a-button>
<a-list bordered :dataSource="list" class="dt_list">
<a-list-item slot="renderItem" slot-scope="item">
<!-- 复选框 -->
<a-checkbox>{{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>
export default {
name: 'app',
data() {
return {
list: [
{
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 }
]
}
}
}
</script>
<style scoped>
#app {
padding: 10px;
}
.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>
功能实现
动态加载任务列表数据
1、打开public文件夹，创建一个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
}
]
2、再接着打开 store/index.js，导入 axios 并在 actions 中添加 axios 请求 json 文件获取数据的代码，因为数据请求是异步的所以必须在 actions 中实现，如下：
import axios from 'axios'
export default new Vuex.Store({
state: {
// 任务列表
list: []
},
mutations: {
initList(state, list) {
state.list = list
}
},
actions: {
getList(context) {
axios.get('/list.json').then(({ data }) => {
console.log('data: ', data);
context.commit('initList', data)
})
}
}
})
3、打开 toDoList.vue 文件，将 store 中的数据获取并展示：
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
// list:[]
}
},
created(){
// console.log(this.$store);
this.$store.dispatch('getList')
},
computed:{
...mapState(['list'])
}
}
</script>
文本框与store数据的双向同步
1、在 store/index.js 文件的 state 中新增 inputValue: 'aaa' 字段，并在 mutations 中新增其修改方法 setInputValue：
// 设置 输入值
setInputValue(state, value) {
console.log('value: ', value);
state.inputValue = value
}
2、在 toDoList.vue 文件的 computed 中映射 inputValue 计算方法：
computed:{
...mapState(['list', 'inputValue'])
}
3、将 inputValue 计算方法绑定到 a-input 元素的 value 上。
4、为 a-input 元素绑定 change 事件方法 handleInputChange：
handleInputChange(e) {
this.setInputValue(e.target.value)
}
添加任务
1、在 store/index.js 文件 state 中新增 nextId: 5 字段，并在 mutations 中编写 addItem：
// 添加任务项
addItem(state) {
const item = {
id: state.nextId,
info: state.inputValue.trim(),
done: false
}
state.list.push(item)
state.nextId++
state.inputValue = ''
}
2、在 toDoList.vue 文件给“添加事项”按钮绑定点击事件，编写处理函数：
addItemToList() {
console.log('iv: ', this.inputValue.trim());
if (this.inputValue.trim().length <= 0) {
return this.$message.warning('文本框内容不能为空！')
}
this.$store.commit('addItem')
}
其他功能实现
store/index.js 文件代码具体实现：
export default new Vuex.Store({
state: {
// 任务列表
list: [],
// 文本框内容
inputValue: 'aaa',
nextId: 5,
viewKey: 'all'
},
getters: {
infoList(state) {
if (state.viewKey === 'all') {
return state.list
} else if (state.viewKey === 'undone') {
return state.list.filter(item => !item.done)
} else {
return state.list.filter(item => item.done)
}
},
unDoneLength(state) {
return state.list.filter(item => !item.done).length
}
},
mutations: {
// 修改列表数据
initList(state, list) {
state.list = list
},
// 设置 输入值
setInputValue(state, value) {
console.log('value: ', value);
state.inputValue = value
},
// 添加任务项
addItem(state) {
const item = {
id: state.nextId,
info: state.inputValue.trim(),
done: false
}
state.list.push(item)
state.nextId++
state.inputValue = ''
},
// 删除任务项
removeItem(state, id) {
const index = state.list.findIndex(item => item.id === id)
if (index !== -1) {
state.list.splice(index, 1)
}
},
// 更改任务完成状态
statusChange(state, params) {
const index = state.list.findIndex(item => item.id === params.id)
if (index !== -1) {
state.list[index].done = params.done
}
},
// 清除完成任务项
clearDone(state) {
state.list = state.list.filter(item => !item.done)
},
// 改版列表数据类型
changeViewKey(state, key) {
state.viewKey = key
}
},
actions: {
getList(context) {
axios.get('/list.json').then(({ data }) => {
console.log('data: ', data);
context.commit('initList', data)
})
}
}
})
toDoList.vue 文件具体实现：
<template>
<div>
<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange"/>
<a-button type="primary" @click="addItemToList">添加事项</a-button>
<a-list bordered :dataSource="infoList" class="dt_list" >
<a-list-item slot="renderItem" slot-scope="item">
<!-- 复选框 -->
<a-checkbox :checked="item.done" @change="cbStatusChange(item.id, $event)">{{item.info}}</a-checkbox>
<!-- 删除链接 -->
<a slot="actions" @click="remoItemById(item.id)">删除</a>
</a-list-item>
<!-- footer区域 -->
<div slot="footer" class="footer">
<!-- 未完成的任务个数 -->
<span>{{unDoneLength}}条剩余</span>
<!-- 操作按钮 -->
<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 @click="clear">清除已完成</a>
</div>
</a-list>
</div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
data() {
return {
}
},
created() {
this.$store.dispatch('getList')
},
computed: {
...mapState(['inputValue', 'viewKey']),
...mapGetters(['unDoneLength', 'infoList'])
},
methods: {
...mapMutations(['setInputValue']),
handleInputChange(e) {
this.setInputValue(e.target.value)
},
addItemToList() {
console.log('iv: ', this.inputValue.trim());
if (this.inputValue.trim().length <= 0) {
return this.$message.warning('文本框内容不能为空！')
}
this.$store.commit('addItem')
},
// 根据 id 删除对应的任务
remoItemById(id) {
this.$store.commit('removeItem', id)
},
cbStatusChange(id, e) {
const params = {
id,
done: e.target.checked
}
console.log('chang params: ', params);
this.$store.commit('statusChange', params)
},
// 清除已完成
clear() {
this.$store.commit('clearDone')
},
changeList(key) {
console.log('changeList: ', key);
this.$store.commit('changeViewKey', key)
}
}
}
</script>
1、删除任务，通过 mutations 修改列表数据实现，详细实现细节见上述代码。
2、绑定复选框的选中状态，同上。
3、修改任务的完成状态，同上。
4、清除已完成的任务，同上。
5、任务列表数据的动态切换，同上。
6、统计未完成的任务的条数，通过 Getter 加工列表数实现，详细实现细节见上述代码
补充 Vuex 模块化-Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。也就是说如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。因此有了Vuex的模块化：
模块化的简单应用
在 store/index.js 中的 modules 定义两个模块 user 和 setting ，user中管理用户的状态 token ，setting 中管理应用的名称 name。
modules: {
user: {
state: {
token: '12345'
}
},
setting: {
state: {
name: 'Vuex modules'
}
}
}
定义 component-a.vue 组件，分别显示用户的 token 和应用名称 name。请注意，此时要获取子模块的状态 需要通过 $store.state.模块名称.属性名 来获取：
<template>
<div>
<div>用户token {{ $store.state.user.token }}</div>
<div>网站名称 {{ $store.state.setting.name }}</div>
</div>
</template>
看着获取有点麻烦，也可以通过之前学过的 getters 来改变一下，在 store/index.js根级别的 getters 增加如下方法：
getters: {
token: state => state.user.token,
name: state => state.setting.name
}
在 component-a 组件中通过 mapGetters 引用为计算属性：
computed: {
...mapGetters(['token', 'name'])
}
// 使用
<div>用户token {{ token }}</div>
<div>网站名称 {{ name }}</div>
模块化中的命名空间-namespaced
默认情况下，模块内部的 action、mutation 和 getter 是注册在 全局命名空间 的，这样使得多个模块能够对同一 mutation 或 action 作出响应。这句话的意思是 刚才的 user 模块还是 setting 模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用如：
在 store/index.js 中 user 模块定义如下 mutations：
mutations: {
// 这里的state表示的是user的state
updateToken(state, token) {
state.token = token
}
}
两种调用方法：
// 导入 mapMutations
import { mapGetters, mapMutations } from "vuex";
// 映射
methods: {
...mapMutations(['updateToken'])
}
// 方法一 直接调用
this.$store.commit('updateToken', 'xxx')
// 方法二 mapMutations 映射
this.updateToken('yyy')
如果想保证内部模块的高封闭性，可以采用namespaced来进行设置。
在 store/index.js 中 setting 模块开启 namespaced 并定义 mutations，如下：
setting: {
state: {
name: 'Vuex modules'
},
namespaced: true,
mutations: {
updateName(state, name) {
state.name = name
}
}
}
使用：
1、直接调用-带上模块的属性名路径 this.$store.commit('setting/updateName', 'xxx')
2、使用 mapMutations 映射方法并带上模块的属性名路径：
...mapMutations(['setting/updateName']),
handel(name) {
this['setting/updateName'](name)
}
3、使用 createNamespacedHelpers 创建基于某个命名空间辅助函数：
// 导入 createNamespacedHelpers
import { createNamespacedHelpers } from 'vuex';
const { mapMutations: settingMutations } = createNamespacedHelpers('setting')
// 映射
methods: {
...settingMutations(['updateName'])
}
// 使用
<button @click="updateName(inputName)">方法三修改 name</button>
