點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

分分鐘學會vue中vuex的應用（入門教程）

來源：懂視網責編：小采時間：2020-11-27 22:30:02

分分鐘學會vue中vuex的應用（入門教程）

分分鐘學會vue中vuex的應用（入門教程）:vuex.js 狀態（數據）管理在vue中當我們管理數據的時候比較亂，我們要用到下面的這個庫，vuex.js Vuex介紹每一個Vuex應用的核心就是store（倉庫），他是用來存儲數據的 store 基本上就是一個容器，它包含著你的應用中大部分的狀態(state)。Vu

推薦度：

點擊下載本文 文檔為doc格式

導讀分分鐘學會vue中vuex的應用（入門教程）:vuex.js 狀態（數據）管理在vue中當我們管理數據的時候比較亂，我們要用到下面的這個庫，vuex.js Vuex介紹每一個Vuex應用的核心就是store（倉庫），他是用來存儲數據的 store 基本上就是一個容器，它包含著你的應用中大部分的狀態(state)。Vu

vuex.js

狀態（數據）管理

在vue中當我們管理數據的時候比較亂，我們要用到下面的這個庫，vuex.js

Vuex介紹

每一個Vuex應用的核心就是store（倉庫），他是用來存儲數據的

"store" 基本上就是一個容器，它包含著你的應用中大部分的狀態(state)。Vuex 和單純的全局對象有以下兩點不同

1.Vuex 的狀態存儲是響應式的

2.你不能直接改變 store 中的狀態

vuex有6個概念

Store(最基本的概念)（創庫）

State (數據)

Getters(可以說是計算屬性)

Mutations

Actions

Modules

讓我們看看怎么來創建一個創庫

store 用來儲存數據（狀態）

new Vuex.Store({})

數據我們放到state里面

state：{}

讓我們看看怎么來讀取里面的數據

store.state.數據

接下來讓我們看看怎么去修改數據

mutations: {}

我們怎么調mutations的數據

用commit()方法來調用

接下來讓我們做一個小效果來看一下vuex在vue中怎么應用

我們做一個購物車加減按鈕的效果

運行效果

<div id="app"></div>

<template id="tpl">
 <div>
 <tip></tip>
 <but></but>
 </div>
</template>

<script>

 var store = new Vuex.Store({
 state:{
 count:0
 },
 mutations:{
 jia (state) {
 state.count++
 },
 jian (state) {
 state.count--
 }
 }
 });

 var vm = new Vue({
 el:"#app",
 template:"#tpl",
 components:{
 tip:{
 template:"<div>{{$store.state.count}}</div>"
 },
 but:{
 template:`
 <div>
 <input type="button" value="+" @click="$store.commit('jia')"/>
 <input type="button" value="-" @click="$store.commit('jian')"/> 
 </div>
 `
 }
 },
 store
 });
</script>

我們從store里面獲取的數據最好放到計算屬性中

當一個組件需要獲取多個狀態時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用mapState輔助函數幫助我們生成計算屬性

下面我們做一個小的效果（注意：注釋的計算屬性和下面使用mapState輔助函數2個結果是相同的）

當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。

運行效果

<script>
 //我們從store里面獲取的數據最好放到計算屬性中
 var store = new Vuex.Store({
 state:{
 count:0,
 num1:1,
 num2:2
 },
 mutations:{
 jia (state) {
 state.count++
 },
 jian (state) {
 state.count--
 }
 }
 });
 var vm = new Vue({
 el:"#app",
 template:"#tpl",
 components:{
 tip:{
 //創建計算屬性
 
 // computed:{
 // count(){
 // return this.$store.state.count;
 // },
 // num1(){
 // return this.$store.state.num1;
 // },
 // num2(){
 // return this.$store.state.num2;
 // }
 // },
 //使用mapState輔助函數
 //computed:Vuex.mapState({
 // count:state=>state.count,
 //num1:state=>state.num1,
 //num2:state=>state.num2
 //}),
 //mapState 傳一個字符串數組
 computed:Vuex.mapState(['count' , 'num1' , 'num2']),
 template:"<div>{{count}}{{num1}}{{num2}}</div>"
 },
 but:{
 template:`
 <div>
 <input type="button" value="+" @click="$store.commit('jia')"/>
 <input type="button" value="-" @click="$store.commit('jian')"/> 
 </div>
 `
 }
 },
 store
 });
</script>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

分分鐘學會vue中vuex的應用（入門教程）

推薦度：

點擊下載本文 文檔為doc格式

標簽： vue中 vuex 分分鐘學會vue中vuex的應用(入門教程)

熱門焦點

分分鐘學會vue中vuex的應用（入門教程）

分分鐘學會vue中vuex的應用（入門教程）

分分鐘學會vue中vuex的應用（入門教程）

最新推薦

猜你喜歡

熱門推薦