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>