vuex的使用總結

1、安裝命令    npm install vuex

2、在src文件目錄下新建一個名爲store的文件夾，爲方便引入並在store文件夾裏新建一個index.js,裏面的內容以下:

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store(); export default store;

3、在 main.js裏面引入store，而後再全局注入一下，這樣一來就能夠在任何一個組件裏面使用this.$store了：

import store from './store/index.js'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4、接下來看一下vuex的原理圖

 

 

由圖能夠看出vuex可由state、mutation、actions三大部分，便於管理，咱們能夠在store文件夾中新建state.js、mutation.js、actions.js

state.js

 

const state={
        city:'上海'
}
export default state;

 

每添加一個js，必定要記得注入index.js中。到這裏已經能夠用this.$store.state.city在任何一個組件裏面獲取city定義的值了

mutation.js

mutattions也是一個對象，這個對象裏面能夠放改變state的初始值的方法，具體的用法就是給裏面的方法傳入參數state或額外的參數,而後利用vue的雙向數據驅動進行值的改變，一樣的定義好以後也把這個mutations扔進Vuex.Store裏面，以下：

const mutations={
    changeCity(state,city){
        state.city=city
    }
}
export default mutations;

這時候你徹底能夠用 this.$store.commit('changeCity','北京') 在別的組件裏面進行改變city的值了，但這不是理想的改變值的方式；由於在 Vuex 中，mutations裏面的方法 都是同步事務，意思就是說：好比這裏的一個this.$store.commit('changeCity','北京')方法,兩個組件裏用執行獲得的值，每次都是同樣的，這樣確定不是理想的需求

vuex官方API還提供了一個actions，這個actions也是個對象變量，最大的做用就是裏面的Action方法能夠包含任意異步操做，這裏面的方法是用來異步觸發mutations裏面的方法，actions裏面自定義的函數接收一個context參數和要變化的形參，context與store實例具備相同的方法和屬性，因此它能夠執行context.commit(' '),而後也不要忘了把它也扔進Vuex.Store裏面：

actions.js

const actions={
    changeCity(ctx,city){
        ctx.commit('changeCity',city)
    }
}
export default actions;

在外部組件裏進行全局執行actions裏面方法的時候，你只須要用執行this.$store.dispatch('changeCity')

綜上幾個js，index.js則爲

import Vue from 'vue';
import Vuex from 'vuex';
import state from './rootState.js';
//import getters from './getters.js';
import mutations from './mutation.js';
import actions from './actions.js';

Vue.use(Vuex);
const store = new Vuex.Store({
    state,
//    getters,
    actions,
    mutations
});

export default store;

組件中調用的例子

<template>
    <div class="home_box">
        <p>{{this.$store.state.city}}</p>
        <ul>
            <li @click="handleCity(item)" v-for="item in citylist">{{item}}</li>
        </ul>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                citylist:["北京","上海","廣州","深圳"]
            }
        },
        methods:{
            handleCity(city){
                this.$store.dispatch("changeCity",city);
            }
        }
    }
</script>