Vue2 基础十Vuex

代码下载

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 加工列表数实现，详细实现细节见上述代码