详解在vue-cli和webpack构建的脚手架中如何使用Vuex(学习笔记)

其实之前使用vue开发项目的时候,由于数据交互不多,所以一直迟迟未使用vuex,我一般采用event bus进行通信,但是随着项目需求不同,觉得有必要揭开vuex的神秘面纱了。(杀猪般的笑声,^_^)

1.首先是安装和注册

 1. 安装命令:npm install vuex --save-dev
 2. 安装完成后需要在main.js中引入,如下所示:
 import Vuex from 'vuex'
 import store from './vuex/store'
 Vue.use(Vuex)
 new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
})

2.准备工作就绪,就开始研究怎么具体使用了,首先抛出一个错误,啊不对,是抛出一个问题,什么是vuex?
官方文档的解释是这样滴:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

这两句话中有几个关键词:状态管理 、 集中式 、可预测的方式发生变化

抓住这些关键词来分析,我们可以简单理解成:vuex就是将组件中公用的状态全部抽出来,集中去管理,无论你是获取状态还是更改状态,都通过vuex来进行。

3.接着,我们正式开始在项目中使用vuex
  • 在src下面新建一个vuex目录,并且新建一个store.js的文件(用来管理所有状态)

这里写图片描述
store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        age: '18' //存储了一个公共状态age
    },
    mutations : {
        showAge(state, msg){
            state.age= msg;
        }
    }
}) 
export default store

现在我们想要在组件中拿到这个状态,并且渲染到页面中,首先你得有个组件,如下:

components1.vue(子组件)

基本结构得有,这只是一个简单的获取状态
<template>
    <div class="components1">
        <div>
            <input type="text" v-model="msg" />
            <input type="button" v-on:click="setAge" value="点我" />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'components1',
        data(){
            return {
                msg : ''
            }
        },
        methods : {
            setName(){
                this.$store.commit( 'showAge', this.msg ); //在组件1中修改组件3的状态
            }
        }
    }
</script>

<style scoped lang="scss"></style>

components3..vue(子组件)

<template>
    <div>
        <h3>{{mAge}}</h3>
    </div>
</template>
<script>
    export default {
        name : "components3",
        computed : { //一般会在组件的计算属性(computed)获取state的数据(因为,计算属性会监控数据变化,一旦发生改变就会响应)
            myAge (){
                return this.$store.state.age;
            }
        }
    }
</script>

components2.vue(现在我们开始组件嵌套,components1和components3是components2的子组件)

<template>
  <div id="app">
    <components1></components1> //我们可以在组件2中渲染出组件1的值,并且在改变state中的age时,组件2中的组件1也会更新。
    <components3></components3>
  </div>
</template>

<script>
import components1 from './components/components1';
import components3 from './components/components3';
export default {
  name: 'app',
  components : {
    components1,
    components3
  }
}
</script>
说真的 ,我已经被绕晕了。。。。。。。自己觉得明白,但是表达不出来。。。尴尬

上述内容参考:
https://www.cnblogs.com/ghostwu/p/7521097.html
https://www.cnblogs.com/first-time/p/6815036.html

Logo

前往低代码交流专区

更多推荐