目录
一、vuex的基本使用
二、vuex获取state中数据方法
1.通过$store获取{{$store.state.num}}
2.通过辅助函数获取
三、修改state中的值
1.通过mutations修改
2.通过辅助函数修改state中num值
四、根据state中的数据变化自动计算处理数据
1.通过$store获取getters中的数据
2.通过辅助函数获取getters中的数据{{userage}}
五、异步的修改state中的数据
1.直接修改
2.通过辅助函数异步修改state中num的值
一、vuex的基本使用
下载vuex组件----yarn add vuex@3
二、vuex获取state中数据方法
1.通过$store获取{{$store.state.num}}
store-index.js
// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";
// 2.Vuex注册到Vue上
Vue.use(Vuex);
// 3.导出Vuex仓库实例
export default new Vuex.Store({
// 存储数据的地方
state: {
num: 100,
name: "zs",
},
//修改state中的数据
mutations: {},
//根据state中的数据变化自动计算处理数据
getters: {},
//异步的修改state中的数据
actions: {},
// modules: {},
});
app.vue
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过$store获取vuex中的数据{{$store.state.num}}</p>
<p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
</div>
</template>
2.通过辅助函数获取
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed: {
...mapState(['num','name'])
}
};
</script>
三、修改state中的值
注意:mutations中的方法是唯一能够操作state中的数据方式
1.通过mutations修改
store-index.js
// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";
// 2.Vuex注册到Vue上
Vue.use(Vuex);
// 3.导出Vuex仓库实例
export default new Vuex.Store({
// 存储数据的地方
state: {
num: 100,
name: "zs",
},
//修改state中的数据
mutations: {
changeNum(state, data) {
state.num += data;
},
},
//根据state中的数据变化自动计算处理数据
getters: {},
//异步的修改state中的数据
actions: {},
// modules: {},
});
App.vue
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过$store获取vuex中的数据{{$store.state.num}}</p>
<p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
<button @click="$store.commit('changeNum',10)">修改state中num的值</button>
</div>
</template>
2.通过辅助函数修改state中num值
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过$store获取vuex中的数据{{$store.state.num}}</p>
<p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
<button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
data() {
return {
};
},
mounted() {
},
methods: {
... mapMutations(['changeNum'])
},
computed: {
...mapState(['num','name'])
}
};
</script>
<style lang="scss" scoped>
</style>
四、根据state中的数据变化自动计算处理数据
注意:getters中的方法一定要返回计算结果
1.通过$store获取getters中的数据
$store.getters.userage
store-index.js
// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";
// 2.Vuex注册到Vue上
Vue.use(Vuex);
// 3.导出Vuex仓库实例
export default new Vuex.Store({
// 存储数据的地方
state: {
num: 100,
name: "zs",
user: {
age: 18,
},
},
//修改state中的数据
mutations: {
changeNum(state, data) {
state.num += data;
},
},
//根据state中的数据变化自动计算处理数据
getters: {
userage(state) {
return state.user.age;
},
},
//异步的修改state中的数据
actions: {},
// modules: {},
});
App.vue
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过$store获取vuex中的数据{{$store.state.num}}</p>
<p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
<button @click="$store.commit('changeNum',10)">修改state中num的值</button>
<button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
<p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
</div>
</template>
2.通过辅助函数获取getters中的数据{{userage}}
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
<p>通过辅助函数获取getters中的数据{{userage}}</p>
<button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
</div>
</template>
<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
data() {
return {
};
},
mounted() {
},
methods: {
... mapMutations(['changeNum'])
},
computed: {
...mapState(['num','name']),
...mapGetters(['userage'])
}
};
</script>
五、异步的修改state中的数据
注意:actions中只负责处理异步逻辑,不能够直接修改state中的数据,如果需要修改state中的数据,还要通过触发mutations的方法去修改
1.直接修改
在actions中异步修改
store-index.js
// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";
// 2.Vuex注册到Vue上
Vue.use(Vuex);
// 3.导出Vuex仓库实例
export default new Vuex.Store({
// 存储数据的地方
state: {
num: 100,
name: "zs",
user: {
age: 18,
},
},
//修改state中的数据
mutations: {
changeNum(state, data) {
state.num += data;
},
},
//根据state中的数据变化自动计算处理数据
getters: {
userage(state) {
return state.user.age + state.num;
},
},
//异步的修改state中的数据
actions: {
changeNumAsync(context, data) {
console.log(context, data);
setTimeout(() => {
context.commit("changeNum", data);
}, 1000);
},
},
// modules: {},
});
App.vue
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
<p>通过辅助函数获取getters中的数据{{userage}}</p>
<button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
<button @click="$store.dispatch('changeNumAsync',100)">异步修改state中num的值</button>
</div>
</template>
<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
data() {
return {
};
},
mounted() {
},
methods: {
... mapMutations(['changeNum'])
},
computed: {
...mapState(['num','name']),
...mapGetters(['userage'])
}
};
</script>
2.通过辅助函数异步修改state中num的值
<template>
<div>
<!-- 6.直接通过$store获取vuex中存储的数据 -->
<p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
<p>通过辅助函数获取getters中的数据{{userage}}</p>
<button @click="$store.dispatch('changeNumAsync',100)">异步修改state中的值</button>
<button @click="changeNumAsync(100)">通过辅助函数异步修改state中的值</button>
</div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
data() {
return {
};
},
mounted() {
},
methods: {
... mapMutations(['changeNum']),
...mapActions(['changeNumAsync'])
},
computed: {
...mapState(['num','name']),
...mapGetters(['userage'])
}
};
</script>