vueX10分钟入门

6次阅读

共计 1927 个字符，预计需要花费 5 分钟才能阅读完成。

通过本文你将：
1. 知道什么是 vueX.
2. 知道为什么要用 VueX.
3. 能跑一个 VueX 的例子。
4. 了解相关概念，面试的时候能说出一个所以然
5. 项目中用 Vuex 知道该学什么东西。
好，走起。
1. 什么是 vueX?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

翻译成人话，Vuex 是 vuejs 的官方管理数据状态的库。
官网：https://vuex.vuejs.org/zh/
2. 为什么用它？
举个例子，
你用 vue 开发一个 app，

不同的组件，你都需要用户信息，还有一些公用的数据，你每一个组件请求一遍浪费性能，你不请求组件间属性和参数传来传去，你自己维护很墨迹，麻烦也容易出错。好吧，你觉得干不好或者麻烦，那么 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>

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
}
})

这里注意，你不用去管

这些破概念，你就照猫画虎，我写啥你抄啥，抄几遍，你就知道数据流向了。你不知道鼠标叫 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>