vuex状态管理

173 阅读1分钟

话不多说,基础开始

  • 安装

cnpm install vuex

  • 文件结构,推荐以下构建文件目录;当然了,结合工程可整合在一个文件,也可更细的拆分

   ---index.js

   ---getters.js
   
   ---mutations.js
   
   ---actions.js
   

注:一般情况在main.js中import store from './store'; store需要注入到new Vue({store})中

各个文件

---index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as getters from './getters';
import * as mutations from './mutations';
import * as actions from './actions';
Vue.use(Vuex);
export default new Vuex.Store({
    state:{
        info:{}//信息
    }
    getters,
    mutations,
    actions
})

---getters.js

export const info = state =>state.info;

---mutations.js

export const setInfo = (store,data) =>{
    state.info = data;
}

---actions.js

export const setInfo = ({commit},data) =>{//setInfo是在组建中调用的名称
    commit('setInfo',data);//setInfo必须和mutations.js的名称一样
}

---info.vue组件中使用

...
this.$store.commit("setInfo",{name:'vvmyly'});//执行mutations操作(同步)
...
...
this.$store.dispatch("setInfo",{name:'vvmyly'});//执行actions操作(异步)
...
  • 偷懒的方法

    小工程小测试的,在组建中直接修改store,甭管什么getters,mutations和actions了,直接就是this.$store.info = {name:'vvmily'}岂不快哉!!!这个写法会引起一些不必要的问题

vuex状态管理基本用法就到这里了,大神勿喷...