当前位置:主页 > vue > vuex的使用

vuex的使用

xi6年前 (2019-12-12)vue12700

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:

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. export default new Vuex.Store({
  5. //state存放状态,
  6. state: {
  7. name: "tom",//需要共用的数据
  8. age: "22"
  9. },
  10. //getter为state的计算属性
  11. getters: {
  12. getName: (state) => state.name,//获取name
  13. getAge: (state) => state.age,
  14. },
  15. //mutations可更改状态的逻辑,同步操作
  16. mutations: {
  17. setName: (state, data) => state.name = data,
  18. setAge: (state, data) => state.age = data,
  19. },
  20. //提交mutation,异步操作
  21. actions: {
  22. acSetName(context, name) {
  23. setTimeout(() => {
  24. //延时1秒提交至mutations中的方法
  25. context.commit("setName", name);
  26. }, 1000);
  27. },
  28. acSetAge(context, age) {
  29. setTimeout(() => {
  30. context.commit("setAge", age);
  31. }, 1000);
  32. }
  33. },
  34. // 将store模块化
  35. modules: {
  36. }
  37. })

ComOne.vue:

  1. <template>
  2. <div class="wrapper">
  3. <!--读取mapGetters中的getName与getAge-->
  4. <div>
  5. name:<span>{{ getName }}</span>
  6. </div>
  7. <div>
  8. age:<span>{{ getAge }}</span>
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. import { mapState, mapGetters } from "vuex"; //导入vuex的辅助函数
  14. export default {
  15. components: {},
  16. //计算属性computed无法传递参数
  17. computed: {
  18. // 映射 state 中的数据为计算属性
  19. ...mapState(["name", "age"]),
  20. // 映射 getters 中的数据为计算属性
  21. ...mapGetters(["getName", "getAge"]),
  22. },
  23. };
  24. </script>
  25. <style scoped>
  26. .wrapper {
  27. color: #fff;
  28. }
  29. </style>

ComTwo.vue:

  1. <template>
  2. <div class="wrapper">
  3. <div>
  4. <span>同步修改:</span>
  5. <!--直接回车调用mapMutations中的setName方法与setAge方法-->
  6. <input
  7. v-model="nameInp"
  8. @keydown.enter="setName(nameInp)"
  9. placeholder="同步修改name"
  10. />
  11. <input
  12. v-model="ageInp"
  13. @keydown.enter="setAge(ageInp)"
  14. placeholder="同步修改age"
  15. />
  16. </div>
  17. <div>
  18. <span>异步修改:</span>
  19. <!--直接回车调用mapAtions中的acSetName方法与acSetAge方法-->
  20. <input
  21. v-model="acNameInp"
  22. @keydown.enter="acSetName(acNameInp)"
  23. placeholder="异步修改name"
  24. />
  25. <input
  26. v-model="AcAgeInp"
  27. @keydown.enter="acSetAge(AcAgeInp)"
  28. placeholder="异步修改age"
  29. />
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import { mapMutations, mapActions } from "vuex"; //导入vuex的辅助函数
  35. export default {
  36. components: {},
  37. data() {
  38. return {
  39. nameInp: "", //绑定输入框的值
  40. ageInp: "",
  41. acNameInp: "",
  42. AcAgeInp: "",
  43. };
  44. },
  45. methods: {
  46. //用于生成与 mutations 对话的方法,即:包含 $store.commit(xx) 的函数
  47. ...mapMutations(["setName", "setAge"]),
  48. //用于生成与 actions 对话的方法,即:包含 $store.dispatch(xx) 的函数
  49. ...mapActions(["acSetName", "acSetAge"]),
  50. },
  51. };
  52. </script>
  53. <style scoped>
  54. .wrapper {
  55. }
  56. </style>
转载请标注来源与原作者

本文链接:http://xiblogs.top/?id=19

“vuex的使用” 的相关文章

vue项目的创建

vue项目的创建

安装node1、检查node,未安装在这里(https://nodejs.org/dist/v16.14.0/node-v16.14.0-x64.msi )下载最新版安装。2、检查npm,node自带...

vue动态绑定样式

vue动态绑定样式

每次点击方块时通过三元表达式,改变对应的class,每一个不同的class对应不同的样式,从而通过改变class实现样式的切换。 <template> <div class=...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。