一.vuex的介绍
vuex是什么?
(精简)对vue中多个组件的共享状态进行集中式管理
vuex的作用(优点)?
vuex可以优化解决的问题:
①将数据及其操作数据的行为都定义在父组件里面
②还需要将数据及其数据操作的行为传递给各个子组件当中(有可能需要多级传递)
起到了优化代码的作用。
vuex的单向数据流(图解)
二.vuex的使用相关
安装vuex(命令:npm install --save vuex)–>vuex固定结构(创建一个store.js文件)–>在main.js中引入–>使用
vuex插件的下载命令
npm install --save vuex
vuex的使用
①创建一个store.js文件,并在其中有以下固定写法:
/*
* vuex的核心管理对象模块:store
* */
import Vue from "vue";
import Vuex from "vuex";
//声明使用Vuex
Vue.use(Vuex);
//状态对象
const state = {
};
//包含多个更新state函数的对象
const mutations = {
};
//包含多个对应事件回调函数的对象
const actions = {
};
//包含多个getter计算属性函数的对象
const getters = {
}
export default new Vuex.Store({
state,//状态对象
mutations,//包含多个更新state函数的对象
actions,//包含多个对应事件回调函数的对象
getters//包含多个getter计算属性函数的对象
}
)
②在main.js中引入store.js文件
③将组件中相关信息写入到 $store 属性中的四个对象(state 、mutations、actions、getters)中,来依据下图中数据流的逻辑:
代码示例
1.store.js文件
/*
* vuex的核心管理对象模块:store
* */
import Vue from "vue";
import Vuex from "vuex";
//声明使用Vuex
Vue.use(Vuex);
//状态对象
const state = {
//初始化数据
count: 0
};
//包含多个更新state函数的对象
const mutations = {
INCREMENT(state){
state.count++;
},
DECREMNENT(state){
state.count--;
}
};
//包含多个对应事件回调函数的对象
const actions = {
increment({
commit}){
commit("INCREMENT");
},
decrement({
commit}){
commit("DECREMNENT")
},
incrementIfOdd({
commit,state}){
//注意此处将commit方法作为参数的写法
if(state.count%2===1){
commit("INCREMENT");
}
},
incrementAsnyc({
commit}){
setTimeout(()=>{
commit("INCREMENT")
},1000)
}
};
//包含多个getter计算属性函数的对象
const getters = {
evenOrOdd (state) {
return state.count%2===0 ? "偶数": "奇数";
}
}
export default new Vuex.Store({
state,//状态对象
mutations,//包含多个更新state函数的对象
actions,//包含多个对应事件回调函数的对象
getters//包含多个getter计算属性函数的对象
}
)
2.App.vue组件
<template>
<div>
<p> clicked {
{$store.state.count}} times, count is {
{evenOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">increment if odd</button>
<button @click="incrementAsync">increment asnyc</button>
</div>
</template>
<script>
export default {
computed: {
evenOrOdd() {
return this.$store.getters.evenOrOdd;//evenOrOdd为回调函数,不需要在后面加括号
}
},
methods:{
//count增加1
increment() {
//通知vuex去增加
this.$store.dispatch("increment");//触发store中对应的actions调用
},
//count减少1
decrement() {
this.$store.dispatch("decrement")
},
//如果是奇才增加
incrementIfOdd() {
this.$store.dispatch("incrementIfOdd")
},
//过1秒才增加
incrementAsync() {//异步增加:每一秒count增加1
this.$store.dispatch("incrementAsnyc")
}
}
}
</script>
3.main.js入口 (一旦将store写在template中进行使用组件,则所有子组件会有$store属性(store对象))
import Vue from "vue"
import App from "./App"
//引入vuex.js文件
import store from "./store"
new Vue({
el:"#app",
components:{
App
},
template: "<App/>",
store//所有组件都会多一个对象 $store
})