vuex入門

阿新 • • 發佈：2018-05-15

err str utf ont www urn state 數據篩選 click

整理自‘遊魚與漁’的文章http://www.cnblogs.com/first-time/p/6815036.html，建議看原文。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>vuex</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.0/vuex.js"></script>
</head>
<body>
    <div id="app">
        <seeme></seeme>
    </div>

    <script type="text/javascript">
        Vue.use(Vuex);
         
var myStore = new Vuex.Store({
            state: {
                //存放組件之間共享的數據，在$store.state中
                name: ‘Cherry‘,
                age: 24,
                num: 1
            },
            mutations:{
                //通過commit一個mutation，顯示地變化state中的數據
                //mutations下的函數接受state作為第一個參數 

                //以及一個payload對象作為第二個參數，payload是提交的內容。
                //mutations必須是同步方法
                //mutations只是定義方法，需要在組件中提交（commit）
                change(state,a) {
                    console.log(state.num += a);
                },
                changeAsync(state,a) {
                    console.log(state.num  
+= a);
                }
            },
            getters:{
                //getters用於篩選state中的數據
                //getters下的函數接受state作為第一個參數，過濾後的數據在$store.getters中
                getAge(state) {
                    return state.age;
                }
            },
            actions: {
                //actions中函數可以執行異步方法
                //actions需要通過mutations提交的函數實現異步
                //actions下的函數接受的第一個參數context是與$store實例相同對象
                //第二個參數接收mutationgs函數的payload參數
                //actions需要在組件中提交（dispatch）

                add(context,value) {
                    setTimeout(function() {
                        context.commit(‘changeAsync‘,value);
                    },1000)
                }
            }
        })

        Vue.component(‘seeme‘,{
            template: `<div>
                            <p @click="changeNum">姓名：{{name}} 年齡：{{age}} 次數：{{num}}</p>
                            <button @click="changeNumAsync">ChangeAsync</button>
                        </div>`,
            computed: {
                name: function() {
                    return    this.$store.state.name;
                },
                age: function() {
                    return this.$store.getters.getAge;
                },
                num: function() {
                    return this.$store.state.num;
                }
            },
            mounted: function() {
                console.log(this);
            },
            methods: {
                changeNum() {
                    //這裏提交mutations中的變化
                    this.$store.commit(‘change‘,10);
                },
                changeNumAsync() {
                    //這裏提交actions中的變化
                    this.$store.dispatch(‘add‘,5);
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                name: ‘Eric‘
            },
            //將myStore添加到實例中，實例中的組件則可以使用
            store: myStore,
            mounted: function(){
                console.log(this);
            }

        })
    </script>
</body>
</html>

4個核心選項：state mutations getters actions

那如何獲取到state的數據呢？

　　　　一般會在組件的計算屬性（computed）獲取state的數據（因為，計算屬性會監控數據變化，一旦發生改變就會響應）

state：用來存放組件之間共享的數據。他跟組件的data選項類似，只不過data選項是用來存放組件的私有數據。

getters：有時候，我們需要對state的數據進行篩選，過濾。這些操作都是在組件的計算屬性進行的。如果多個組件需要用到篩選後的數據，那我們就必須到處重復寫該計算屬性函數；或者將其提取到一個公共的工具函數中，並將公共函數多處導入 - 兩者都不太理想。如果把數據篩選完在傳到計算屬性裏就不用那麽麻煩了，getters就是幹這個的，你可以把getters看成是store的計算屬性。getters下的函數接收接收state作為第一個參數。那麽，組件是如何獲取經過getters過濾的數據呢？過濾的數據會存放到$store.getters對象中。

mutations：前面講到的都是如何獲取state的數據，那如何把數據存儲到state中呢？在 Vuex store 中，實際改變狀態(state) 的唯一方式是通過提交(commit) 一個 mutation。　　mutations下的函數接收state作為參數，接收一個叫做payload（載荷）的東東作為第二個參數，這個東東是用來記錄開發者使用該函數的一些信息，比如說提交了什麽，提交的東西是用來幹什麽的，包含多個字段，所以載荷一般是對象（其實這個東西跟git的commit很類似）還有一點需要註意：mutations方法必須是同步方法！

actions：

actions和mutations的區別

　　　　　　1.Actions 提交的是 mutations，而不是直接變更狀態。也就是說，actions會通過mutations，讓mutations幫他提交數據的變更。

　　　　　　2.Action 可以包含任意異步操作。ajax、setTimeout、setInterval不在話下

　　　context：context是與 store 實例具有相同方法和屬性的對象。可以通過context.state和context.getters來獲取 state 和 getters。

　　　dispatch：翻譯為‘派發、派遣’的意思，觸發事件時，dispatch就會通知actions（跟commit一樣一樣的）參數跟commit也是一樣的。

　action的大體流程：

　　　　　　 1.在actions選項裏添加函數（異步）並提交到對應的函數（在mutation選項裏）中 context.commit(‘changeAsync‘,value);

　　　　　　　2.　在組件裏： changeNumAnsyc:function(){this.$store.dispatch(‘add‘, 5);} 將dispatch“指向”actions選項裏的函數

　　　　　　　3.　在mutations選項裏，要有對應的函數 changeAsync:function(state,a){console.log(state.num +=a);}

vuex入門

vuex入門

Vuex入門詳細教程

Day01----Vuex 入門

vuex入門

Vuex入門到上手教程

vue之vuex入門祕籍

vuex 入門應用

Vuex入門學習手冊

老弟，來了？VUE+Nuxt.js+Koa+Vuex入門教程（一）仿寫一個cnode網站

vuex入門文檔

Vuex入門（5）—— 為什麽要用Action管理異步操作

Vue2.0 探索之路——vuex入門教程和思考

Vuex入門（3）—— getters,mapGetters,...mapGetters詳解

Vuex入門實踐（上）

Vuex入門實踐（中）-多module中的state、mutations、actions和getters

Vue入門之Vuex實戰

vuex 基本入門和使用（一）

[轉] 從零構建 vue2 + vue-router + vuex 開發環境到入門，實現基本的登入退出功能

Vue.js——十分鐘入門Vuex

vuex 最簡單、最詳細的入門文件

vuex 基本入門和使用（三）-關於 mutation

vuex入門

相關推薦