vuex的使用总结

一、安装命令    npm install vuex

二、在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

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

三、在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

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

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

四、接下来看一下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>