©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>vuex是什么
vuex是一个专门为vue开发的状态管理工具，它采用集中式存储管理应用的所有组件的状态，其核心是state。
<>vuex中有什么
state：存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测。
getter:可理解为store的计算属性，能读取state中的数据。
mutations：装着处理数据逻辑方法的集合体，是该改变state中数据的唯一方法，修改数据是同步的。
actions：提交mutations修改数据，与mutations功能类似，但修改数据是异步的。
modules：当store过于臃肿时，可使用modules将store分割成模块，每个模块中都有自己的state、getter、mutations、actions
<>vuex使用示例
场景：将store中的数据在ComOne组件中渲染出来，在ComTwo组件中分别同步异步修改。
1、一般使用"vue create xxx"命令创建的项目的默认选项是自带vuex的，无需手动添加。
2、vuex的各种状态和方法是写在src下的store里的index.js中的。
3、在state中存入需要共用的数据：
4、在store中分别写出vuex的getters、mutations、action(modules在数据臃肿时也可将之模块化写出):
5、在ComOne中导入vuex中的辅助函数mapState与mapGetters：
6、在ComOne中用辅助函数映射出vuex的state与getters作为计算属性：
7、在页面直接使用映射出的数据：
8、在ComTwo中导入修改vuex数据的辅助函数mapMutations与mapActions：
9、在ComTwo中使用辅助函数生成修改vuex对应数据的方法：
10、直接在页面中通过回车事件触发修改vuex的方法：
11、在第一行输入框中输入数据按下回车后name与age会立刻更新修改(同步)，在第二行输入框中输入数据按下回车后name与age会等待一秒后更新修改(异步)。
<>具体实现代码
store的index.js：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new
Vuex.Store({ //state存放状态, state: { name: "tom",//需要共用的数据 age: "22" },
//getter为state的计算属性 getters: { getName: (state) => state.name,//获取name getAge: (
state) => state.age, }, //mutations可更改状态的逻辑，同步操作 mutations: { setName: (state,
data) => state.name = data, setAge: (state, data) => state.age = data, },
//提交mutation，异步操作 actions: { acSetName(context, name) { setTimeout(() => {
//延时1秒提交至mutations中的方法 context.commit("setName", name); }, 1000); }, acSetAge(
context, age) { setTimeout(() => { context.commit("setAge", age); }, 1000); } },
// 将store模块化 modules: { } })
ComOne.vue:
<template> <div class="wrapper"> <!--读取mapGetters中的getName与getAge--> <div>
name：<span>{{ getName }}</span> </div> <div> age：<span>{{ getAge }}</span> </div
> </div> </template> <script> import { mapState, mapGetters } from "vuex";
//导入vuex的辅助函数 export default { components: {}, //计算属性computed无法传递参数 computed: {
// 映射 state 中的数据为计算属性 ...mapState(["name", "age"]), // 映射 getters 中的数据为计算属性 ...
mapGetters(["getName", "getAge"]), }, }; </script> <style scoped> .wrapper {
color: #fff; } </style>
ComTwo.vue:
<template> <div class="wrapper"> <div> <span>同步修改：</span> <!--
直接回车调用mapMutations中的setName方法与setAge方法--> <input v-model="nameInp" @keydown.
enter="setName(nameInp)" placeholder="同步修改name" /> <input v-model="ageInp"
@keydown.enter="setAge(ageInp)" placeholder="同步修改age" /> </div> <div> <span>
异步修改：</span> <!--直接回车调用mapAtions中的acSetName方法与acSetAge方法--> <input v-model=
"acNameInp" @keydown.enter="acSetName(acNameInp)" placeholder="异步修改name" /> <
input v-model="AcAgeInp" @keydown.enter="acSetAge(AcAgeInp)" placeholder=
"异步修改age" /> </div> </div> </template> <script> import { mapMutations,
mapActions} from "vuex"; //导入vuex的辅助函数 export default { components: {}, data() {
return { nameInp: "", //绑定输入框的值 ageInp: "", acNameInp: "", AcAgeInp: "", }; },
methods: { //用于生成与 mutations 对话的方法，即：包含 $store.commit(xx) 的函数 ...mapMutations([
"setName", "setAge"]), //用于生成与 actions 对话的方法，即：包含 $store.dispatch(xx) 的函数 ...
mapActions(["acSetName", "acSetAge"]), }, }; </script> <style scoped> .wrapper {
} </style>