Vue中vuex的使用方法

一、安装vuex

npm install --save vuex@3

二、定义store数据

//仓库
import Vuex from 'vuex';
import Vue from 'vue';
//安装插件
Vue.use(Vuex);

export default new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    getters:{}
})

三、其中属性的含义

        state        ：所有的数据都在此声明

        mutations：state中的数据只能在此修改，不能处理异步操作

        actions     ：处理异步操作（如延时定时器）

        getters     ：相当于计算属性，对state中的数据进行二次展示，不更改state中的数据

四、用法

①在store中定义：

export default new Vuex.Store({
    state:{
        connt:1
    },
    mutations:{
        add(state,step){
            state.connt += step;
        }
    },
    actions:{
        addAsync(context,step){
            setTimeout(() => {
                context.commit('add',step)
            }, 1000);
        }
    },
    getters:{
        addCont(state){
            return (stop) =>{
                return '计算结果为'+state.connt+stop
            }
        }
    }
})

②调用用法： ps：所有的方法示例都是由传参示例的

	方式一	方式二
state	{{$store.state.connt}}	①导入：         import {mapState} from 'vuex' ②映射为计算属性：           computed:{                     ...mapState(['connt'])           } ③调用：         {{connt}}
mutations	@click="$store.commit('add',2)"	①导入：         import {mapMutations} from 'vuex' ②映射为函数：           methods:{                     ...mapMutations(['add'])           } ③调用：          <button @click="add(2)">调用mutations</button>
actions	@click="$store.dispatch('addAsync',2)	①导入：         import {mapActions} from 'vuex' ②映射为函数：           methods:{                      ...mapActions(['addAsync'])           } ③调用：          @click="addAsync(2)"
getters	{{$store.getters.addCont(3)}} getters跟随state的变化而变化 getters不改变stste的数据	①导入：         import {mapGetters} from 'vuex' ②映射为函数：           methods:{                     ...mapGetters(['addCont'])           } ③调用：          {{addCont(3)}}

五、模块化开发

store下的index.js代码

//仓库
import Vuex, { storeKey } from 'vuex';
import Vue from 'vue';
//安装插件
Vue.use(Vuex);

import Home from './Home'
import Search from './Search'

export default new Vuex.Store({
    modules:{
        Home,
        Search
    }
})

 每个模块下的代码，如Home文件下index.js文件代码

const state ={};
const mutations ={};
const actions ={};
const getters ={};

export default {
    state,
    mutations,
    actions,
    getters
}