Vue技術点整理-Vuex

18162 ワード
Vuexとは?
1，Vuex       Vue.js              。                    ，                        
2，    Vuex         store（  ）。“store”         ，                (state)
3，     ，                   ，

いつVuexを使いましたか?
1，                 ，          ，      ，      Vuex               。
2，              ，         Vuex，      store                     。

 
一、vue cliにおける簡単なVuexの使用例
1、stateの使い方
注意:main.jsはstoreを定義するコードであり、後でstateを受信するいくつかの方法である.
  • main.js 
    • import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router/'
Vue.use(Vuex)
const store = new Vuex.Store({
  namespaced: false,
  state: {
    title: '  ',
    backFlag: false
  },
  mutations: {
    updateTitle (state, title) {
      state.title = title
    },
    updateBackFlag (state, backFlag) {
      state.backFlag = backFlag
    }
  }
})
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  • 取得状態個数が少ない場合に適合する
    • 

<span style="color: #000000;">
export default {
  name: </span><span style="color: #800000;">"</span><span style="color: #800000;">       </span><span style="color: #800000;">"</span><span style="color: #000000;">,
  computed: {
    title () {
      return this.$store.state.title;
    },
    backFlag () {
      return this.$store.state.backFlag;
    }
  }
}
</span>

  • 複数の状態に適合する場合
    • 

<span style="color: #000000;">
import { mapState } from </span>'vuex'<span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
  name: </span>"       "<span style="color: #000000;">,
  computed: mapState({<br>    //'title',//           
     title: state </span>=><span style="color: #000000;"> state.title,
     backFlag: state </span>=><span style="color: #000000;"> state.backFlag
  })
}
</span>
  • ローカル計算属性と混合して使用する場合
    • 

<span style="color: #000000;">
import { mapState } from </span>'vuex'<span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
  name: </span>"       "<span style="color: #000000;">,
  ...mapState({
    title: state </span>=><span style="color: #000000;"> state.title,
    backFlag: state </span>=><span style="color: #000000;"> state.backFlag
  })
}
</span>

     
    2、Getterの使い方
    注意:Getterがステータスライブラリ内のデータに適用される場合は、一度フィルタリングする必要があるか、またはステータス値が他のステータスに依存して一定の計算を行う必要がある場合は、Getterメソッドを使用して計算して戻ることができます.
  • 定義getterコード:
    • const store = new Vuex.Store({
  namespaced: false,
  state: {
    todos: [
      { id: 1, text: '   ', done: false },
      { id: 2, text: '   ', done: false },
      { id: 3, text: '   ', done: true }
    ]
  },
  mutations: {
    updateTodos (state, todos) {
      state.todos = todos
    }
  },
  getters: {
    //  id ，  todos      
    getTodoById: (state) => (id) => {
       return state.todos.find(todo => todo.id === id)
    },
    //  todos    done true  
    doneTodos: state => {
       return state.todos.filter(todo => todo.done)
    }
  }
})

     
  • 受信getterコード:
    • 
<span style="color: #000000;">
import { mapState,mapGetters } from </span>'vuex'<span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
  name: </span>"test"<span style="color: #000000;">,
  computed: {
    </span><span style="color: #008000;">//</span><span style="color: #008000;">    doneTodos，    doneTodos</span>
<span style="color: #000000;">    ...mapGetters({
       doneTodos: </span>'doneTodos'<span style="color: #000000;">
    })
  },
  mounted:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
     </span><span style="color: #008000;">//</span><span style="color: #008000;">  todos    done true  </span>
     console.info(<span style="color: #0000ff;">this</span><span style="color: #000000;">.$store.getters.doneTodos)
     </span><span style="color: #008000;">//</span><span style="color: #008000;">  todos    done true  </span>
     console.info(<span style="color: #0000ff;">this</span>.$store.getters.getTodoById(2<span style="color: #000000;">))
  }
};
</span>

    3,Mutationの使い方
    注意:Vuexのstoreの状態を変更する唯一の方法は、mutationをコミットして状態を直接変更することですが、Mutationは同期関数でなければなりません.呼び出しapiなどの非同期操作が必要な場合は、4 actionsを使用してください.
  • 定義Mutationコード
    • const store = new Vuex.Store({
  namespaced: false,
  state: {
    title: '  ',
    backFlag: false
  },
  mutations: {
    updateTitle (state, title) {
      state.title = title
    },
    updateBackFlag (state, backFlag) {
      state.backFlag = backFlag
    }
  }
})
  • 呼び出し受信Mutationコード
    • 
<span style="color: #000000;">
import { mapState,mapMutations } from </span>'vuex'<span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
  name: </span>"test"<span style="color: #000000;">,
  computed: {
     </span><span style="color: #008000;">//</span><span style="color: #008000;">    title </span>
<span style="color: #000000;">     ...mapState({
        title: state </span>=><span style="color: #000000;"> state.title,
     })
  },
  mounted:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
     </span><span style="color: #008000;">//</span><span style="color: #008000;">          title  </span>
     <span style="color: #0000ff;">this</span>.$store.commit('updateTitle',"  _  "<span style="color: #000000;">)
        
     </span><span style="color: #008000;">//</span><span style="color: #008000;">          title  </span>
     <span style="color: #0000ff;">this</span>.updateTitle('  _  '<span style="color: #000000;">)
  },
  methods: {
     </span><span style="color: #008000;">//</span><span style="color: #008000;">   `this.add()`     `this.$store.commit('navbar/updateTitle')`</span>
<span style="color: #000000;">     ...mapMutations({
        updateTitle: </span>'updateTitle'<span style="color: #000000;"> 
     })
  }
};
</span>

     
    4、アクションの使い方
    注意:Actionはmutationと似ていますが、次の点で異なります.
  • Actionは、ステータスを直接変更するのではなく、mutationをコミットします.
  • Actionは任意の非同期動作を含むことができ、promise、awaitなどの処理非同期呼び出し
    • を用いることができる.
  • 定義Action 
    • import HttpService from '../../service/httpService.js';
const store = new Vuex.Store({
  namespaced: false,
  state: {
    title: '  ',
    backFlag: false
  },
  mutations: {
    updateTitle (state, title) {
      state.title = title
    },
    updateBackFlag (state, backFlag) {
      state.backFlag = backFlag
    }
  },
  actions: {
    updateTitleAsync (context,obj) {
      return new Promise((resolve, reject) => {
        let channelId = '001'
        HttpService.queryGoods(channelId)
            .then(data => {
                context.commit('updateTitle',obj.title)
                resolve()
            })
            .catch(error => {
                 console.info(error);
            });
     })
   }
  }
})
  • actionコード
    • を受信
    
<span style="color: #000000;">
import { mapState,mapMutations,mapActions } from </span>'vuex'<span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
   name: </span>"test"<span style="color: #000000;">,
        </span><span style="color: #008000;">//</span><span style="color: #008000;">    title </span>
<span style="color: #000000;">        ...mapState({
          title: state </span>=><span style="color: #000000;"> state.title,
        })
   },
   mounted:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> this.updateTitleAsync("    ,      ")</span>
        <span style="color: #0000ff;">this</span><span style="color: #000000;">.updateTitleAsync({
            title: </span>"    ,         "<span style="color: #000000;">
        }).then(() </span>=><span style="color: #000000;"> {<br>            //console.info(context.backFlag)
            console.info(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.$store.state.title)
        })
    },
    methods: {
        </span><span style="color: #008000;">//</span><span style="color: #008000;">   `this.updateTitleAsync()`     </span>
      `<span style="color: #0000ff;">this</span>.$store.dispatch('increment'<span style="color: #000000;">)`
        ...mapActions({
          updateTitleAsync: </span>'updateTitleAsync'<span style="color: #000000;"> 
        })
    }
};
</span>

     
    5,Moduleの使い方
    注意:適用が複雑な場合、ステータスが多く管理が困難な場合、Vuexではstoreをモジュールに分割できます.
  • moduleモジュール
    • を作成する
    const store new Vuex.Store({
  modules: {
            //navbar  ：
        navbar: {
            namespaced:     true,
            state: {
              title: '   ',
              backFlag: false
            },
            mutations: {
              updateTitle (state, title) {
                state.title = title
              },
              updateBackFlag (state, backFlag) {
                state.backFlag = backFlag
              }
            }
       }
  }
})
  • 使用モジュールの値をどのように受け取るかは、以下のように参照され、モジュール名を加えると
    • になる.
    
<span style="color: #000000;">
import { mapState,mapMutations } from </span>'vuex'<span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
  name: </span>"test"<span style="color: #000000;">,
  computed: {
     </span><span style="color: #008000;">//</span><span style="color: #008000;">    title </span>
<span style="color: #000000;">     ...mapState({
        title: state </span>=><span style="color: #000000;"> state.<span style="color: #ff0000;">navbar</span>.title,
     })
  },
  mounted:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
     </span><span style="color: #008000;">//</span><span style="color: #008000;">          title  </span>
     <span style="color: #0000ff;">this</span>.$store.commit('<span style="color: #ff0000;">navbar</span>/updateTitle',"  _  "<span style="color: #000000;">)
        
     </span><span style="color: #008000;">//</span><span style="color: #008000;">          title  </span>
     <span style="color: #0000ff;">this</span>.updateTitle('  _  '<span style="color: #000000;">)
  },
  methods: {
     </span><span style="color: #008000;">//</span><span style="color: #008000;">   `this.add()`     `this.$store.commit('<span style="color: #ff0000;">navbar</span>/updateTitle')`</span>
<span style="color: #000000;">     ...mapMutations({
        updateTitle: </span>'<span style="color: #ff0000;">navbar</span>/updateTitle'<span style="color: #000000;"> 
     })
  }
};
</span>

      
    GitHub     vue-ht-cli
    STLのvectorの初期化方式まとめ
    axiosリクエストをカプセル化し、コミットパラメータを検証