vuex

简介: vuex

人之贤不肖譬如鼠矣,在所自处耳!――《李斯列传》

聊聊vuex,官方文档:https://vuex.vuejs.org/zh/

介绍就不赘述了,直接上使用

安装:

cnpm install vuex --save

我们新建一个store,再创建一个index.js

再新建一个modules目录,里面放上 value.js

main.js中我们写入

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store';
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

挂载完毕后,我们编写main.jsvalue.js

main.js

// 页面路径:store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
// vue的插件机制
Vue.use(Vuex);
import ruben from '@/store/modules/value.js'
//Vuex.Store 构造器选项
export default new Vuex.Store({
  modules: {
    // 模块
    ruben
  }
});

value.js

// vuex module
// 在外部使用`vuex`,可以如下引用
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
  // namespaced:true,
  // `state` 在外部访问可以使用 `mapState`
  // computed: {
  //  ...mapState({
  //    value: state => state.ruben.value
  //  }),
  // }
  // 配置了`mapState`就可以使用 `this.value` 代替 `this.$store.state.ruben.value`
  state: {
    value: 'hello'
  },
  // `getters` 在外部访问可以使用 `MapGetters`
  // computed: {
  //  ...mapGetters(['getValue']) 
  // }
  // 配置了`MapGetters`就可以使用 `getValue` 代替 `this.$store.getters.getValue`
  // 取别名: 把 `this.getVuexValue` 映射为 `this.$store.getters.getValue`
  //  ...mapGetters({getVuexValue:'getValue'})
  getters: {
    getValue: state => state.value
  },
  // `mutations` 在外部访问可以使用 `mapMutations`
  // methods:{
  //  ...mapMutations(['setValue'])
  // }
  // 配置了`mapMutations`就可以使用 `setValue(value)` 代替 `this.$store.commit('setValue', value)`
  // 取别名: 把 `this.setVuexValue(value)` 映射为 `this.$store.commit('setValue', value)`
  //  ...mapMutations({setVuexValue:'setValue'})
  mutations: {
    setValue(state, value) {
      state.value = value
    }
  },
  // `actions` 在外部访问可以使用 `mapActions`
  // methods:{
  //  ...mapActions(['submitValue'])
  // }
  // 配置了`mapActions`就可以使用 `submitValue()` 代替 `this.$store.dispatch('submitValue', value)`
  // 取别名: 把 `this.submitVuexValue(value)` 映射为 `this.$store.dispatch('submitValue', value)`
  //  ...mapMutations({submitVuexValue:'setValue'})
  actions: {
    submitValue(context, value) {
      console.log("context: ", context);
      return new Promise((resolve, reject) => setTimeout(() => {
        context.commit('setValue', value);
        resolve(value);
      }, 1000))
    }
  }
}

去掉注释长这样:

export default {
  state: {
    value: 'hello'
  },
  getters: {
    getValue: state => state.value
  },
  mutations: {
    setValue(state, value) {
      state.value = value
    }
  },
  actions: {
    submitValue(context, value) {
      console.log("context: ", context);
      return new Promise((resolve, reject) => setTimeout(() => {
        context.commit('setValue', value);
        resolve(value);
      }, 1000))
    }
  }
}

然后我们找个页面引用一下

<template></template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState({
      value: state => state.ruben.value
    }),
    ...mapGetters(['getValue'])
  },
  methods: {
    ...mapMutations(['setValue']),
    ...mapActions(['submitValue'])
  },
  created() {
    console.log('this: ', this);
    // state
    console.log('this.value: ', this.value);
    console.log('this.$store.state.value: ', this.$store.state.ruben.value);
    // mutations
    this.setValue('ruben');
    this.$store.commit('setValue', 'ruben');
    // getters
    console.log('this.getValue: ', this.getValue);
    console.log('this.$store.getters.getValue: ', this.$store.getters.getValue);
    // actions
    this.submitValue('achao').then(console.log);
    this.$store.dispatch('submitValue','achao').then(console.log);
  }
};
</script>
<style></style>

我们看输出结果

目录
打赏
0
0
0
0
29
分享
相关文章
一文带你了解vuex和使用(2024年11月)
欢迎来到我的博客,我是自学前端两年半的大一学生,熟悉JavaScript与Vue,正向全栈发展。本篇介绍了Vuex,Vue.js的状态管理模式,包括其核心概念如state、getter、mutation、action及模块化使用,通过集中管理状态确保应用状态的可预测变化。文章详细解析了Vuex的工作原理,特别是与Vue的computed属性和响应式系统的集成,以及如何在实际项目中搭建和使用Vuex。如果你觉得有帮助,欢迎关注,我将持续更新更多技术文章。🎉🎉🎉
125 0
什么是vuex
什么是vuex
63 0
侃侃VUEX实现
「这是我参与2022首次更文挑战的第17天,活动详情查看:2022首次更文挑战」
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等