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: { } })
vuex文件初始狀態
二、核心概念五部分：
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: { } })
state
在頁面使用
原始方法
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: {
}
})
getters
在頁面中使用
原始方法
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: {
}
})
mutations
在頁面中的使用：
原始方法：
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: {
}
})
actions
在頁面中使用：
原始方法：
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）
