搜尋

首頁 >web前端 >js教程 >vuejs實作外掛程式狀態管理詳解

vuejs實作外掛程式狀態管理詳解

韦小宝
韦小宝原創
2018-03-14 16:14:591861瀏覽

這篇文章講述了vuejs實現插件狀態管理，大家對vuejs實現插件狀態管理不了解的話或者對vuejs實現插件狀態管理感興趣的話那麼我們就一起來看看本篇文章吧， 好了廢話少說進入正題吧

對於新手來說，一開始接觸vuex時候只聽說它很強大，很好用，各種nb操作，一旦嘗試去了解它的時候便顯得力不從心。本人也是如此，一開始接觸的時候透過看文檔， 看視頻，最後還是把它擱一邊去。一段時間之後回來再琢磨的時候，有了新的體認與體諒。

首先，如果你想真正掌握vuex，那麼就的弄清楚這幾個問題：

1.什麼是vuex?

#2.在什麼情況下要用到vuex(也就是vuex能夠解決什麼樣的問題)，什麼情況下適合用vuex?

##那麼先來看看這兩個問題:

什麼是vuex?官網說：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。  依照個人通俗理解來說就是：vuex就是用來管理各個元件之間的一些狀態，可以理解為這些狀態就是公共(共享)部分。此時任何元件都能從中取得狀態或觸發一些行為事件。

什麼情況下用到vuex?官網說：如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用足夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要建置是一個中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇。

好，那麼現在我就當你是開發一個比較大型的項目，在那些地方會用到vuex呢？  隨著應用程式的複雜度增加,元件之間傳遞資料或元件的狀態會越來越多，舉個例子：當A元件進入B元件（A頁進入B頁）的時候，常常需要帶一些參數過去，那麼此時你可能會選擇放在url後面當做參數傳遞過去，如果你不想輕易暴露參數，你有可能先存到session中或者localstorage中，然後進入到第二個頁面的時候再取出來。不錯，這確實是一種解決方法，而且用的不少。但這不是一個好的方法，這時候，你就需要vuex來幫助你了。另外，當你基本上了解vuex的一些皮毛之後，你會發現vuex管理是基於模組化的思想，那麼這就對專案後期管理維護很友善了。

so,現在你就得來深入認識vuex的核心概念了。以下是個人理解的概念，首先在此之前建議最好先把官方文件Vuex2.0概念過一遍。

Vuex 中 Store 的模板化定義如下：

1 、

state 

定義了所應用的資料結構，也就是vuex中放置初始化資料（狀態）的地方。相當於元件中的data用來放資料。 

 state:{
        todoLists:[],
    },
#2、getters 就是從state中派生出狀態，例如取得state中todoLists的總數。其實就是相當於vue中的計算屬性computed，只不過getters是放在vuex裡的。

#

//Getters函数 接受 state 作为其第一个参数
  getters:{
      todoCount(state){
          return state.todoLists.length;
      }
  },
//和Getters函数一样 接受 state 作为其第一个参数
  mutations:{
      //新増 TodoList item
      ONADDTODO(state,item){
          state.aTodos.push(item);
      },
      //删除 TodoList item
      ONDELTODO(state,index){
          state.aTodos.splice(index,1);
      },
      //设置 错误提示信息
      ONERROR(state,str){
          state.massage=str;
      }
  },

##3、

mutations 是唯一允許更新應用程式狀態的地方。類似vue中的$on事件：每個 mutation 都有一個字串的事件類型 (type)和 一個回呼函數 (handler)。注意：mutations都必須是同步函數

//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
    因此你可以调用 context.commit 提交一个 mutation，
    或者通过 context.state 和 context.getters 来获取 state 和 getters
  actions:{
      //提交 ONADDTODO
      onAddTodo(context,item){
          if(item.value!=""){
              context.commit("ONADDTODO",item);
              context.commit("ONERROR","");
          }else{
              context.commit("ONERROR","添加失败")
          }
      },
      //提交 ONDELTODO
      //可利用 ES2015 的 [参数解构] 来简化代码
      onDelTodo({commit},index){
          //commit=context.commit
          commit("ONDELTODO",index);
      }

  }

4、

##actions ##定義提交觸發更改訊息的描述，在actions中可做任意非同步操作

，常見的例子有從服務端獲取數據，在數據獲取完成後會調用store.commit()(類似vue中$emit)來調用更改 Store 中的狀態。可以在元件中使用dispatch來發出 Actions。 


vue init webpack-simple vue-vuex-todolist
npm install 
npm install vuex --save
npm run dev   //启动项目

Vuex輔助函數
1、Vuex.mapState(map : Array98c455a79ddfebb79781bff588e7b37e | Object): Object

建立元件的計算屬性傳回Vuex store 中的狀態。
2、Vuex.mapGetters(map: Array98c455a79ddfebb79781bff588e7b37e | Object): Object

建立元件的計算屬性傳回 getter 的回傳值。
3、Vuex.mapActions(map: Array98c455a79ddfebb79781bff588e7b37e | Object): Object

建立元件方法分發 action。

4、Vuex.mapMutations(map: Array98c455a79ddfebb79781bff588e7b37e | Object): Object

建立元件方法提交 mutation。

Vuex輔助函數具體用法參考：API文件

TodoList範例

在了解Vuex 的基礎概念之後，我們會建立一個todolist來熟悉整個使用流程。

使用vue-cli工具建立專案

目錄，並安裝vuex

##

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        massage:"",
        aTodos:[{value:"默认默认",id:0}],
    },
    getters:{
        nCounts(state){
            return state.aTodos.length;
        }
    },
    mutations:{
        //新増 TodoList item
        ONADDTODO(state,item){
            state.aTodos.push(item);
        },
        //删除 TodoList item
        ONDELTODO(state,index){
            state.aTodos.splice(index,1);
        },
        //设置 错误提示信息
        ONERROR(state,str){
            state.massage=str;
        }
    },
    actions:{
        //提交 ONADDTODO
        onAddTodo(context,item){
            if(item.value!=""){
                context.commit("ONADDTODO",item);
                context.commit("ONERROR","");
            }else{
                context.commit("ONERROR","添加失败")
            }
        },
        //提交 ONDELTODO
        onDelTodo({commit},index){
            commit("ONDELTODO",index);
        }

    },
    modules:{}
});

export default store;
src 目錄下建立名為store 的目錄來存放狀態管理相關程式碼，先建立index.js

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

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})
main.js 檔案中將該Store 實例加入到建構的Vue 實例中

<template>
    <p class="form-group ">
      <input type="text" class="form-control"  placeholder="" v-model="value"  />
      <button type="buttom" class="btn btn-default" @click="addItem">Add Item</button>
    </p>
</template>
<script>
    export default{
        data(){
            return {
                value:"",
                id:0
            }
        },
        methods:{
            addItem(){
                let item={value:this.value,id:++this.id};
                this.value="";
                this.$store.dispatch("onAddTodo",item);
            }
        }

    }
</script>
<style lang="scss">
    %box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
    .form-group{@extend %box;
        .form-control{-webkit-box-flex:1;}
    }
</style>
src 目錄下建立名為components的目錄來存放vue元件，並建立input.vue,list.vue檔案

#input.vue

<template>
    <p class="todolist">
      <ul class="list-group">
        <li class="list-group-item" v-for="(item,index) in aTodos" >
            <span>{{item.value}}</span>
            <button class="btn btn-default" @click="delItem(index)">删除</button>
        </li>
       </ul>
    </p>
</template>
<script>
    import {mapState} from "vuex";
    export default{
        data(){
            return {}
        },
        methods:{
            delItem(index){
                this.$store.dispatch(&#39;onDelTodo&#39;,index);
            }
        },
        computed:{
            ...mapState([
                &#39;aTodos&#39;
            ])
        }
    }
</script>
<style lang="scss">
    %box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
    .list-group-item{display: -webkit-box;-webkit-box-align:center;
        span{
            display: block;
            -webkit-box-flex:1;
        }
    }
</style>

###list.vue ############
<template>
  <p id="app">
    <h1>Vue.js Vue TodoList</h1>
    <hr>
    <todoInput />
    <todoList />
    <p>todoList 数量：{{todoCount}}</p>
    <pre class="brush:php;toolbar:false">{{$store.state}}

<script> import todoInput from &#39;./components/input.vue&#39;; import todoList from &#39;./components/list.vue&#39;; import {mapGetters} from "vuex"; export default { name: &#39;app&#39;, data () { return { msg: &#39;Welcome to Your Vue.js App&#39; } }, computed:{ ...mapGetters({ todoCount:"nCounts" }) }, components:{ todoInput, todoList } } </script> ############

修改App.vue文件

<template>
  <p id="app">
    <h1>Vue.js Vue TodoList</h1>
    <hr>
    <todoInput />
    <todoList />
    <p>todoList 数量：{{todoCount}}</p>
    <pre class="brush:php;toolbar:false">{{$store.state}}

<script> import todoInput from &#39;./components/input.vue&#39;; import todoList from &#39;./components/list.vue&#39;; import {mapGetters} from "vuex"; export default { name: &#39;app&#39;, data () { return { msg: &#39;Welcome to Your Vue.js App&#39; } }, computed:{ ...mapGetters({ todoCount:"nCounts" }) }, components:{ todoInput, todoList } } </script>

index.html添加bootstrap.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-vuex-demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <p id="app"></p>
    <script src="/dist/build.js"></script>
  </body>
</html>

以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！

相关推荐：

Vuejs搜索匹配功能实例详解

Vuejs2.0子组件调用父组件的方法

以上是vuejs實作外掛程式狀態管理詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：select下拉方塊預設選中下一篇：select下拉方塊預設選中

相關文章

看更多