(精华2020年5月14日更新) vue实战篇 vuex的使用和vuex辅助函数的使用
vuex的基本使用
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//定义属性
var state = {
count:6,
country:'中国'
};
//定义getters
var getters = {
count(state){
return state.count
},
isEvenOrOdd(state){
return state.count%2==0?'偶数':'基数';
}
}
//定义mutation，处理状态（数据）的改变
var mutations = {
increment(state,payload){
debugger
state.count = state.count + payload.data
},
incrementAsync(state,payload){
//异步操作
var p=new Promise((resolve,reject) => {
setTimeout(() => {
resolve();
},3000);
});
p.then(() => {
state.count = state.count + payload.data
}).catch(() => {
console.log('异步操作');
});
}
}
//定义actions，要执行的操作，如流程判断、异步请求等
var actions = {
// increment(context,payload){
// context.commit('increment',payload)
// },
increment({commit},payload){
debugger
commit('increment',payload)
},
incrementAsync({commit,state},payload){
//异步操作
var p=new Promise((resolve,reject) => {
setTimeout(() => {
resolve();
},3000);
});
p.then(() => {
commit('increment',payload);
}).catch(() => {
console.log('异步操作');
});
}
}
//创建store对象
var store = new Vuex.Store({
state,
getters,
mutations,
actions
})
//导出store对象
export default store;
main.js挂载store.js
import Vue from 'vue'
import App from './App.vue'
import Vuestore from './store.js'
new Vue({
el: '#app',
//会自动将store对象注入到所有的子组件中
// 在子组件中通过this.$store访问该store对象
store:Vuestore,
render: h => h(App)
})
在vue组件中使用
<template>
<div id="app">
<h1>{{ msg }}</h1>
<h2>获取store仓库中的所有数据state</h2>
{{$store.state.count}}
<h2>通过计算属性获取</h2>
{{getCount}}
<h2>通过计算属性获取是否基偶数</h2>
{{isEvenOrOdd}}
<h2>通过store里的getters</h2>
{{$store.getters.isEvenOrOdd}}
<button type="button" @click="increment()">增加</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:{
getCount(){
return this.$store.state.count;
},
isEvenOrOdd(){
return this.$store.state.count%2==0?'偶数':'基数';
}
},
methods:{
increment(){
// 2.通过仓库管理员mutation - 用来修改数据
// this.$store.commit('increment',{
// data:6
// })
// this.$store.commit({
// type:'increment',
// data:5
// })
// this.$store.commit('incrementAsync',{
// data:6
// })
//3. 通过actions ，dispatch一个action函数
// this.$store.dispatch('increment',{
// data:6
// })
this.$store.dispatch({
type:'increment',
data:6
})
//4. 异步
// this.$store.dispatch('incrementAsync',{
// data:6
// })
}
},
mounted(){
// this.$store.state.count = 8;
}
}
</script>
vuex的辅助函数的使用
首先上store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//定义属性（数据）
var state = {
count: 16,
todolist: [{
id: 1,
task: '读书',
finished: true
},
{
id: 2,
task: '写字',
finished: false
}
]
}
//定义getters
var getters = {
getCount(state) {
return state.count;
},
isEvenOrOdd(state) {
return state.count % 2 == 0 ? '偶数' : '奇数';
},
getFinished(state) {
return state.todolist.filter((item) => {
return item.finished
})
},
getUnFinished(state) {
return state.todolist.filter((item) => {
return !item.finished
})
},
}
//定义actions，要执行的操作，如流程判断、异步请求等
const actions = {
// increment(context,payload){//包含：commit、dispatch、state
// console.log(context);
// context.commit('increment',payload)
// },
increment({
commit
}, payload) {
commit('increment', payload)
},
decrement({
commit,
state
}, payload) {
if (state.count > 10) {
commit('decrement', payload);
}
},
incrementAsync({
commit,
state
}, payload) {
//异步操作
var p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 3000);
});
p.then(() => {
commit('increment', payload);
}).catch(() => {
console.log('异步操作');
});
},
todosUpdate({
commit
}, payload) {
var p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 3000);
});
p.then(() => {
commit('todosUpdate', payload);
// state.todolist.push(payload);
})
}
}
//定义mutations，处理状态（数据）的改变
const mutations = {
// 没有参数的情况
// increment(state){
// state.count++;
// },
// 有参数的情况
increment(state, payload) {
state.count += payload.data;
},
decrement(state, payload) {
state.count -= payload.data;
},
todosUpdate(state, payload) {
state.todolist.push(payload);
// 异步情况， 不方便调试
// var p=new Promise((resolve,reject) => {
// setTimeout(() => {
// resolve();
// },3000);
// });
// p.then(()=>{
// state.todolist.push(payload);
// })
}
}
//创建store对象
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
//导出store对象
export default store;
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
mapstate辅助的使用
<template>
<div class="map-state">
直接通过state 获取 {{this.$store.state.count}}
<ul>
<!-- <li>countTest1: {{countTest1}}</li>
<li>countTest2: {{countTest2}}</li>-->
<!-- <li>countTest3: {{countTest3}}</li> -->
<li>count: {{count}}</li>
</ul>todolist:
<br />
{{todolist}}
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {};
},
computed: {
// ...mapState({
// countTest1:state=>state.count, //直接获取state
// countTest2(state){
// return state.count
// }
// }),
// ...mapState({
// countTest3:'count'
// // countTest3是方法名，count 并不是字符串，是对应state里的变量，
// // 然后将这个state重命名
// }),
// 映射 this.count 为 store.state.count
...mapState(["count", "todolist"])
},
mounted() {
//1. 直接从state里获取
console.log(this.$store.state.count);
}
};
</script>
mapgetter使用
<template>
<div class="map-getters">
<h2>通过本页面的计算属性：</h2>
<!-- {{FinishedTask}} -->
<ul>
<li v-for="(item,index) in FinishedTask" :key="index">{{item.task}}</li>
</ul>
<h2>通过在store中配置getters后获取：</h2>
<ul>
<li v-for="(item,index) in $store.getters.getFinished" :key="index">{{item.task}}</li>
</ul>
<h2>通过辅助函数mapGetters获取 getUnFinished：</h2>
<ul>
<li v-for="(item,index) in getUnFinished" :key="index">{{item.task}}</li>
</ul>
<div>
<h2>通过辅助函数mapGetters获取 todosALise</h2>
{{todosALise}}
</div>
<div>
<!-- 通过辅助函数mapGetters获取 getCount
{{getCount}}-->
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
todoList: this.$store.state.todolist
};
},
computed: {
//本页面的计算属性
FinishedTask() {
return this.$store.state.todolist.filter(item => {
return item.finished;
});
},
// ...mapGetters( ['getCount','getFinished','getUnFinished']),
// 方式一 :如果你想将一个 getter 属性另取一个名字，使用对象形式：
// 把 `this.todosALise` 映射为 `this.$store.getters.getCount`
// 把 `this.getUnFinished` 映射为 `this.$store.getters.getUnFinished`
...mapGetters({
todosALise: "getCount",
getUnFinished: "getUnFinished"
})
}
};
</script>
mapmutation的使用
<template>
<div class="map-mutation">
<p>改变count</p>
<button type="button" @click="totalCount({data:5})">通过mapMutations改变count</button>
<br />
<button type="button" @click="changeCount({data:5})">通过普通的mutation改变count</button>
<div>
<ul>
<li v-for="(item,index) in $store.state.todolist" :key="index">
{{item.task}}
<br />
任务状态：{{item.finished?'已完成':'未完成'}}
</li>
</ul>
</div>
<button type="button" @click="mutationTodos()">通过普通的mutation改变todoList</button>
<br />
count的值： {{$store.state.count}}
</div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
data() {
return {};
},
methods: {
...mapMutations({
totalCount: "increment",
todosUpdate: "todosUpdate"
// increment 是mutation 里的方法，totalCount是重新定义的一个别名方法，本组件直接调用这个方法
}),
changeCount() {
// 2.通过仓库管理员mutation - 用来修改数据
// this.$store.commit('increment',{
// data:6
// })
// this.$store.commit({
// type:'increment',
// data:5
// })
//3. 通过mapMutations的方法
this.totalCount({ data: 5 });
},
mutationTodos() {
var datas = {
id: 3,
task: "画画",
finished: false
};
// this.$store.commit('todosUpdate',datas) //方式一
this.todosUpdate(datas); // 方式二 mapMutations
//注意：如果mutation里有异步的方法， 这里获取不到实时的信息
console.log(this.$store.state.todolist);
}
}
};
</script>
mapaction的使用
<template>
<div class="map-action">
<button type="button" @click="totoalCount({data:6})">增加count</button>
<button type="button" @click="decrement({data:4})">减少count</button>
{{$store.state.test03.count}}
<button type="button" @click="updateTodos()">增加任务</button>
<div>
{{$store.state.test03.todolist}}
</div>
<button type="button" @click="changeCount()">增加count</button>
</div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
data(){
return {
}
},
// methods:mapActions(['decrement','todosUpdate','incrementAsync']),
// methods:mapActions({
// 'decrement':'decrement',
// 'totoalCount':'increment',
// 'incrementAsync':'incrementAsync',
// 'todosUpdate':'todosUpdate'
// }),
watch:{
'$store.state.todolist':{
handler(newobj,oldObj){
console.log(newobj);
},
deep:true
}
},
methods:{
...mapActions({
'decrement':'decrement',
'totoalCount':'increment',
'incrementAsync':'incrementAsync',
'todosUpdate':'todosUpdate'
}),
changeCount(){
this.totoalCount({data:6})
},
updateTodos(){
var datas = {
id:3,
task:'画画',
finished:false
};
this.todosUpdate(datas);
this.$nextTick(()=>{ //微任务
console.log('--------------');
console.log(this.$store.state.todolist); //取不到action里面的异步数据
})
}
}
// methods:{
// // totoalCount(data){
// // this.$store.dispatch('increment',data)
// // },
// decrement(data){
// this.$store.dispatch('decrement',data)
// },
// incrementAsync(data){
// this.$store.dispatch('decrement',data)
// },
// todosUpdate(data){
// this.$store.dispatch('todosUpdate',data)
// },
// }
}
</script>
<style scoped>
.map-action {
margin-top: 30px;
}
</style>