Shulou(Shulou.com)06/03 Report--

这篇文章主要介绍了Vue与Vuex第一次接触需要注意什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式

但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。

一、安装并引入 Vuex

项目结构：

首先使用 npm 安装 Vuex

cnpm install vuex -S

然后在 main.js 中引入

import Vue from 'vue'import App from './App'import Vuex from 'vuex'import store from './vuex/store'Vue.use(Vuex)/* eslint-disable no-new */new Vue({ el: '#app', store, render: h => h(App)})

二、构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。

但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。

在 src 目录下创建一个 vuex 目录，将 store.js 放到 vuex 目录下

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ // 定义状态 state: { author: 'Wise Wrong' }})export default store

这是一个最简单的 store.js，里面只存放一个状态 author

虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次

三、将状态映射到组件

{{lis.li}}

Copyright © {{author}} - 2016 All rights reserved

export default { name: 'footerDiv', data () { return { ul: [ { li: '琉璃之金' }, { li: '朦胧之森' }, { li: '缥缈之滔' }, { li: '逍遥之火' }, { li: '璀璨之沙' } ] } }, computed: { author () { return this.$store.state.author } } }

这是 footer.vue 的 html 和 script 部分

主要在 computed 中，将 this.$store.state.author 的值返回给 html 中的 author

页面渲染之后，就能获取到 author 的值

4. Modify state in component

Then add an input box in header.vue to pass the value of the input box to author in store.js

Here I used Element-UI as the style framework

Above, bind the value of the input box to inputTxt, and then bind the click event to the button at the back to trigger the setAuthor method.

methods: { setAuthor: function () { this.$ store.state.author = this.inpuTxt }}

In the setAuthor method, the value inputTxt of the input box is assigned to the state author in Vuex, thereby enabling data transfer between subcomponents

V. The officially recommended way to modify the status

The above example is to modify the status author directly by assigning in setAuthor, but vue officially recommends the following method:

First define a method newAuthor in store.js, where the first parameter state is $store.state, and the second parameter msg needs to be passed separately.

Then modify the setAuthor method in header.vue

Here we modify author by submitting newAuthor with $store.commit and passing this.inputTxt to msg

Explicitly committing mutations like this allows us to better track every state change, so the second method is recommended for large projects.

Thank you for reading this article carefully. I hope that Xiaobian's "Vue and Vuex first contact need to pay attention to what" this article is helpful to everyone. At the same time, I hope everyone will support you a lot. Pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.