关于Vuex的使用方法
本文不搞虚头巴脑的哈，咱们直奔主题!
我们知道Vuex干嘛的吧?不知道写给你了！
多个视图依赖同一个状态
来自不同视图的行为需要变更同一个状态
核心的几个东西
State Getter Mutation Actions
关于State
- step1
我们先安装Vuex: npm install vuex --save
- step2
在src路径写一个store文件夹 里面创建个JS文件: index.js
- step3 我们进入这个文件，上代码！如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: { //定义状态让全局去使用
names: ["金牌讲师", "芜湖", "大司马", "申请"],
age: 18
},
})
export default store
- step4
在main.js中加入这个
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store, //一定要在这边把store引入，不然就会报错！
components: {
App
},
template: '<App/>'
})
- step 5 这是我某个组件，当然你也可以定义其他组件。
<template>
<div>
<ul>
<li v-for="item in personName" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "name",
computed: {
...mapState({ personName: "names", myAge: "age" }), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
},
};
</script>
我们可以使用mapState结构拿到状态，这个是官方比较推荐的方法，原本的应该是：
...mapState(["names","age"])
我这种写法这是给了他一个名字，在我这个组件中使用的，绰号！！！我们就可以启动一下看到名字被遍历出来了哈。
值得注意的是给他绰号就需要用对象形式哈，不能再用数组了
当然你也可以不用mapState
this.$store.state.names
但是这种用法比较麻烦，不推荐
关于Getter
这玩意是个啥呢,怎么说呢 就是你突然想对state进行更改，给他加一些修饰，比如你想给我上边的每个名字后面加个"起飞？！",你可以一个一个给他修改，但是如果数据很多呢？处理起来就会变的非常麻烦 所以！上代码！
我们给index.js文件中加入getters,对state进行处理
const store = new Vuex.Store({
state: {
names: ["金牌讲师", "芜湖", "大司马", "申请"],
age: 18
},
getters: {
getMessage(state) {
return state.names.map((item) => {
return item += "起飞！"
})
}
},
})
export default store
在组件中加入
<template>
<div>
<ul>
<li v-for="item in personName" :key="item">
{{ item }}
</li>
</ul>
<ol>
<li v-for="item in this.getMessage" :key="item">
{{ item }}
</li>
</ol>
</div>
</template>
<script>
import { mapState, mapGetters} from "vuex";
export default {
name: "name",
computed: {
...mapState({ personName: "names", myAge: "age" }), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
...mapGetters(["getMessage"])
},
};
</script>
和上面类似 你也可以用 this. $store .getters.XXX,但是官方推荐使用...mapGetters 这样代码比较好看，而且你也可以同样用绰号给他改名，类似于state
上面是我们读取代码 --原生读取-- 和 --修饰读取-- 下面我们将会怎么去修改值
关于Mutation
就是去修改state的值的一个东西
不多BB 直接上代码吧
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
names: ["金牌讲师", "芜湖", "大司马", "申请"],
age: 18
},
getters: {
getMessage(state) {
return state.names.map((item) => {
return item += "起飞！"
})
}
},
mutations: {
// 不推荐这种写法
// setAge(state, age) {
// state.age = age
//}
// 官方推荐这种写法 ，传一个对象进去，我们一般都用payload
setAge(state, payload) {
state.age = payload.age
}
},
})
export default store
组件里如何使用？组件里的代码如下
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
name: "name",
mounted() {
this.setAge({ age: 40 });
console.log(this.myAge);
this.setAgeNew({ age: 42 });
},
computed: {
...mapState({ personName: "names", myAge: "age" }), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
...mapGetters(["getMessage"]),
},
methods: {
//Mutation和Action 是写在methods
...mapMutations(["setAge"]),
...mapActions(["setAgeNew"]),
},
};
</script>
我们这个不能再写在计算属性里了，就需要写到methods去调用了，写法也和上面类似，一样的，也可以起绰号，也可以用老写法，但是还是推荐使用这种。
值得注意的是 Mutations里面的函数必须是同步操作，不能包含异步操作！
关于Actions
mutations: {
setAge(state, payload) {
state.age = payload.age
}
},
actions: {
setAgeNew(content, payload) {
return new Promise(reslove => {
setTimeout(() => {
content.commit("setAge", {
age: payload.age
})
reslove()
console.log(this.state.age);
}, 2000)
})
}
}
看了上边的代码 是不是明白了，action就是去提交mutation的，什么异步操作都在action中消化了，最后再去提交mutation的。
组件中的代码也是类似的
mounted() {
this.setAge({ age: 40 });
console.log(this.myAge);
this.setAgeNew({ age: 42 });
}
基本东西就在这里了，写过一遍就好了，推荐一篇掘金文章
https://juejin.cn/post/6928468842377117709#heading-11
本文就是按照这个写的一遍的，自己巩固一下