10分钟入门Vuex

96
大彬哥666
2.2 2019.03.05 11:55 字数 660

通过本文你将:

1.知道什么是Vuex.

2.知道为什么要用Vuex.

3.能跑一个VueX的例子。

4.了解相关概念,面试的时候能说出一个所以然

5.项目中用Vuex知道该学什么东西。

好,走起。

1.什么是Vuex?

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

翻译成人话,Vuex是vuejs的官方管理数据状态的库。

官网:https://vuex.vuejs.org/zh/

2.为什么用它?

举个例子,

你用vue开发一个app,


06-评价页2.jpg

不同的组件,你都需要用户信息,还有一些公用的数据,你每一个组件请求一遍浪费性能,你不请求组件间属性和参数传来传去,你自己维护很墨迹,麻烦也容易出错。好吧,你觉得干不好或者麻烦,那么vueX帮你解决这个事儿。

这个没什么复杂的,大学图书馆,自助借还书,每次都把书乱放,维护很麻烦,怎么办,都还给图书馆管理员,图书馆管理员统一管理调配。ok,图书管理员就是VueX.

3.怎么用?

1.安装

npm install vuex --save

2.初始化store.js,

(vue-cli安装项目目录不墨迹),

一般放到src/store/store.js下面,初始化代码,相当于搞了一个图书管理员。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({})

3.写需要的组件

创建一个Form.vue组件,怼下面的内容,

<template>
    <div>
        <label for="dabinge666">你喜欢彬哥哪一点</label>
        <input name="dabinge666">
    </div>
</template>

创建一个展示组件Display.vue

<template>
    <div>
        <p>我喜欢彬哥:</p>
    </div>
</template>

打开App.vue,删掉没用的东西,直接怼下面的代码,

<template>
  <div id="app">
    <Form/>
    <Display/>
  </div>
</template>

<script>
import Form from './components/Form'
import Display from './components/Display'

export default {
  name: 'App',
  components: {
    Form,
    Display
  }
}
</script>

到这里,架子就搭好了。

4.增加各种需要的东西,

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    love: ''
  },
  mutations: {
    change(state, love) {
      state.love = love
    }
  },
  getters: {
    love: state => state.love
  }
})

这里注意,你不用去管

1550290974790.png

这些破概念,你就照猫画虎,我写啥你抄啥,抄几遍,你就知道数据流向了。你不知道鼠标叫mouse,也不影响你玩电脑。

love就是你喜欢我的东西,相当于一个变量,被传来传去的一会。

好了,就这么简单可以用了。

4.使用Vuex

打开main.js,导入,然后用。

import { store } from './store/store'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

到这里就相当于图书管理员上岗等着学生来还书了,来啊,互相伤害啊!

5.我来了……

既然搞数据,躲不开刚才我们的搞的表单组件,打开Form.vue

<template>
  <div>
    <label for="dabinge666">你喜欢彬哥哪一点?</label>
      //输入:离我远一点
    <input @input="changed" name="dabinge666">
  </div>
</template>

<script>
export default {
  methods: {
    changed: function(event) {
        //大声喊出你的对彬哥的爱,让整个图书馆都听到
      this.$store.commit('change', event.target.value)
    }
  }
}
</script>

打开,Display.vue

<template>
  <div>
    <p>我喜欢彬哥: {{ $store.getters.love }}</p>
  </div>
</template>

漂亮,如果你运行成功,你就会发现,页面里面出现,我喜欢彬哥:离我远一点。

告辞!

活动