vuex的簡單使用教程

更新時間：2018年02月02日 10:09:33 作者：wmui

vuex是一個專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex的簡單使用,需要的朋友可以參考下

什么是Vuex？

vuex是一個專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。狀態(tài)？我把它理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態(tài)。簡單的說就是data中需要共用的屬性。

使用vuex進(jìn)行組件間數(shù)據(jù)的管理

npm i vuex -S

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 這里定義初始值
let state = {
 count:10
};
const mutations = {
 add(context){
  context.count++
 },
 decrease(context){
  context.count--
 }
};
// 事件觸發(fā)后的邏輯操作
// 參數(shù)為事件函數(shù)
const actions = {
 add(add){
  add.commit('add')
 },
 decrease(decrease){
  decrease.commit('decrease')
 },
 oddAdd({commit,state}){
  if (state.count % 2 === 0) {
   commit('add')
  }
 }
};
// 返回改變后的數(shù)值
const getters = {
 count(context){
  return context.count
 },
 getOdd(context) {
  return context.count % 2 === 0 ? '偶數(shù)' : '奇數(shù)'
 }
};
export default new Vuex.Store({
 state,
 mutations,
 actions,
 getters
})

App.vue

<template>
 <div id="app">
 <button @click="add">add</button>
 <button @click="decrease">decrease</button>
 <button @click="oddAdd">oddAdd</button>
 <div>{{count}}</div>
 <div>{{getOdd}}</div>
 </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
 export default {
  // 得到計(jì)算后的值
  computed:mapGetters(['count','getOdd']),
  // 發(fā)生點(diǎn)擊事件觸發(fā)不同函數(shù)
  methods:mapActions(['add','decrease','oddAdd'])
 }
</script>

GitHub: https://github.com/wmui

總結(jié)

以上所述是小編給大家介紹的vuex的簡單使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vuex
使用

相關(guān)文章

Vue3使用slot插槽的實(shí)現(xiàn)
插槽在真實(shí)的開發(fā)中使用非常的多,比如我們?nèi)ビ靡恍┑谌浇M件庫的時候,通常都需要通過自定義插槽來實(shí)現(xiàn)內(nèi)容的自定義,本文主要介紹了Vue3使用slot插槽的實(shí)現(xiàn),感興趣的可以了解一下
2023-12-12
第一次使用webstrom簡單創(chuàng)建vue項(xiàng)目的一些報(bào)錯實(shí)戰(zhàn)記錄
在使用webstorm新建vue項(xiàng)目時常會遇到一些報(bào)錯,特別是新手第一次運(yùn)行項(xiàng)目,這篇文章主要給大家介紹了關(guān)于第一次使用webstrom簡單創(chuàng)建vue項(xiàng)目的一些報(bào)錯實(shí)戰(zhàn)記錄,需要的朋友可以參考下
2023-02-02
VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue中父子組件通訊之todolist組件功能開發(fā)
這篇文章主要介紹了Vue中父子組件通訊——todolist組件功能開發(fā)的相關(guān)知識,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-05-05
Vue修改iview組件的樣式的兩種方案(element同)
使用vue必然會用到等iview組件庫,但是iview的組件的樣式跟自己寫的div的樣式修改不太一樣,所以本文給大家介紹了Vue修改iview組件的樣式的兩種方案(element同),需要的朋友可以參考下
2024-04-04
詳解jquery和vue對比
這篇文章主要介紹了jquery和vue對比，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue-froala-wysiwyg 富文本編輯器功能
這篇文章主要介紹了vue-froala-wysiwyg 富文本編輯器功能，分步驟給大家介紹了vue3.中如何安裝使用froala,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程
在業(yè)務(wù)中列表拖拽排序是比較常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue3子組件如何修改父組件傳過來的props數(shù)據(jù)
周所周知vue的props是單向數(shù)據(jù)流,可以從父組件中改變傳往子組件的props,反之則不行,下面這篇文章主要給大家介紹了關(guān)于vue3子組件如何修改父組件傳過來的props數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue事件修飾符使用詳細(xì)介紹
在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理
2022-10-10