vuex简单使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
1、共享数据和状态集中管理易于开发和后期维护
2、状态存储具有响应式的特点，实时保持各页面的数据同步
一、使用：
1、搭建vue脚手架vue3.0+在脚手架安装时就可以选择同时安装好vuex
2、目录结构：在src文件夹下面有一个store文件夹里面的index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, getters: { }, mutations: { }, actions: { }, modules: { } })
二、核心概念五部分：
1、state 数据
所有需要共享的数据和状态都存放在state里
例如home页面这个列表和about页面共用
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 数据 state: { list: [ { id: 1, name: "李一", ctime: '2020/6/28' }, { id: 2, name: "李二", ctime: '2020/6/28' }, { id: 3, name: "李三", ctime: '2020/6/28' }, { id: 4, name: "李四", ctime: '2020/6/28' } ], }, getters: { }, mutations: { }, actions: { }, modules: { } })
在页面使用
原始方法
this.$store.state.list
1）先在页面引入mapState（mapState是辅助函数）
import { mapState } from 'vuex'
2）在计算属性调用方法
computed: {
...mapState(['list']),
},
3）直接在列表中使用
<table border="1px" cellspacing="0"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td> <span @click="delList(item.id)">删除</span> </td> </tr> </tbody> </table>
2、getters 过滤
在我们使用数据时有时候需要原始数据的部分，getters就是对数据进行过滤或计数使用，不能用来改变原始数据 我们可以用搜索做事例
过滤方法可以写在getters里
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 数据
state: {
list: [
{ id: 1, name: "李一", ctime: '2020/6/28' },
{ id: 2, name: "李二", ctime: '2020/6/28' },
{ id: 3, name: "李三", ctime: '2020/6/28' },
{ id: 4, name: "李四", ctime: '2020/6/28' }
],
},
// 过滤
getters: {
// forEach 循环 some 循环遇true终止 filter 过滤 findIndex 找索引
searchList: (state) => (name) => {
return state.list.filter(item => {
if (item.name.includes(name)) {
return item;
}
});
}
},
// 修改
mutations: {
},
actions: {
},
modules: {
}
})
在页面中使用
原始方法
this.$store.getters.searchList
1）先在页面引入mapGetters（mapGetters是辅助函数）
import { mapGetters } from 'vuex'
2）在计算属性调用
computed: {
...mapGetters(['searchList']),
},
3）在列表中使用
<label>搜索：<input type="text" v-model="keyword" v-focus v-color/></label>
<table border="1px" cellspacing="0"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in searchList(keyword)" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td> <span @click="delList(item.id)">删除</span> </td> </tr> </tbody> </table>
3、mutations 修改
在vuex中我们前面说过在state只能存放状态 不能直接操作修改状态 所以想要修改数据只能通过提交mutations
对数据变更的方法可以写在mutations
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 数据
state: {
list: [
{ id: 1, name: "李一", ctime: '2020/6/28' },
{ id: 2, name: "李二", ctime: '2020/6/28' },
{ id: 3, name: "李三", ctime: '2020/6/28' },
{ id: 4, name: "李四", ctime: '2020/6/28' }
],
},
// 过滤
getters: {
// forEach 循环 some 循环遇true终止 filter 过滤 findIndex 找索引
searchList: (state) => (name) => {
return state.list.filter(item => {
if (item.name.includes(name)) {
return item;
}
});
}
},
// 修改
mutations: {
// 删除
delList(state, id) {
return state.list.some((item, i) => {
if (item.id === id) {
state.list.splice(i, 1);
return true;
}
});
},
},
actions: {
},
modules: {
}
})
在页面中的使用：
原始方法：
this.$store.commit('delList',id) //方法名和参数
1）先在页面引入mapMutations（mapMutations是辅助函数）
import { mapMutations } from 'vuex'
2）在方法中调用
methods: {
...mapMutations(['delList'])
},
3）在列表中使用
<table border="1px" cellspacing="0"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in searchList(keyword)" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td> <span @click="delList(item.id)">删除</span> </td> </tr> </tbody> </table>
4、actions 异步
actions并不是直接变更state，它提交的是mutations，和mutations不同的是它可以进行异步操作
异步操作可以写在actions中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 数据
state: {
list: [
{ id: 1, name: "李一", ctime: '2020/6/28' },
{ id: 2, name: "李二", ctime: '2020/6/28' },
{ id: 3, name: "李三", ctime: '2020/6/28' },
{ id: 4, name: "李四", ctime: '2020/6/28' }
],
},
// 过滤
getters: {
// forEach 循环 some 循环遇true终止 filter 过滤 findIndex 找索引
searchList: (state) => (name) => {
return state.list.filter(item => {
if (item.name.includes(name)) {
return item;
}
});
}
},
// 修改
mutations: {
// 删除
delList(state, id) {
return state.list.some((item, i) => {
if (item.id === id) {
state.list.splice(i, 1);
return true;
}
});
},
// 添加
add(state, item) {
return state.list.push({ id: item.id, name: item.name, ctime: '2020/6/29' });
}
},
// 异步提交mutations
actions: {
// 异步添加
addList(context, item) {
context.commit('add', item )
}
},
modules: {
}
})
在页面中使用：
原始方法：
this.$store.dispatch('add',{age:15}) // 方法名和参数
1）先在页面引入mapMutations（mapMutations是辅助函数）
import { mapActions } from 'vuex'
2）在方法中调用
methods: {
...mapActions(['addList']),
},
3）在列表中使用
<div class="addclass"> <label> ID： <input type="text" v-model="id" /> </label> <label> Name： <input type="text" v-model="name" @keyup.enter="addList({id:id,name:name})" /> </label> <input type="button" value="添加" @click="addList({id:id,name:name})" /> <label> 搜索： <input type="text" v-model="keyword"/> </label> </div>
5、Module 模块
当应用变得非常复杂时，store 对象就有可能变得相当臃肿,Vuex 允许我们将 store 分割成模块（module）
