VUE-X数据仓库状态管理器

快速上手

VUEX 是一个数据仓库、状态管理器，做到类似 storage 的效果，在网页中存储一些公用数据而不需要向后台请求安装

    npm install vuex --save-dev

在 src 源码目录下新建一个文件夹 vuex，然后新建一个 store.js，写入

    import Vue from 'vue';
	import Vuex from 'vuex';
	Vue.use(Vuex);

声明一个常量

    const  state={
	  count : 1
	};

    export default new Vuex.Store({
	  state
	})

然后新建一个 vue 模板

    <template>
	  <div>
	    <h2>{{ msg }}</h2>
	    <hr>
	    <h3>{{ $store.state.count }}</h3>
	  </div>
	</template>
	<script>
	  import store from '@/VUEX/store';
	  export default {
	    data(){
	      return{
	        msg:'Hello Vuex'
	      }
	    },
	    store
	  }
	</script>

新建好路由即可完成这个 store 的访问

state 访问状态对象（获得状态）

首先我们改造刚刚写的模板

    <template>
	  <div>
	    <h2>{{ msg }}</h2>
	    <hr>
	    <h3>{{ $store.state.count }}-{{ count }}</h3>
	  </div>
	</template>
	<script>
	  import store from '@/VUEX/store';
	  import {mapState} from 'vuex';
	  export default {
	    data(){
	      return{
	        msg:'Hello Vuex'
	      }
	    },
	    computed:mapState({
	      count:state=>state.count
	    }),
	    store
	  }
	</script>

这样又能在页面中访问一次状态对象，还有一种简便的写法

    computed:mapState([count])

也能做到上方一样的效果，只是上面 ES6 语法中还可以加入其它编程。

Mutations 修改状态（改变状态）

首先改造一下模板

    <template>
	  <div>
	    <h2>{{ msg }}</h2>
	    <hr>
	    <h3>{{ $store.state.count }}-{{ count }}</h3>
	    <p>
	      <button @click="$store.commit('add')">+</button>
	      <button @click="$store.commit('reduce')">-</button>
	    </p>
	  </div>
	</template>

这两个按钮需要点击了能够递增或者递减 count 在 store.js 写入

    const mutations={
	  add(state){
	    state.count ++;
	  },
	  reduce(state){
	    state.count --;
	  }
	};
	export default new Vuex.Store({
	  state,
	  mutations
	})

这样就可以加减了然后我们还可以在加减的时候带参数

    <button @click="$store.commit('add',10)">+</button>
      <button @click="$store.commit('reduce')">-</button>

store.js 写入

    const mutations={
	  add(state,n){
	    state.count +=n;
	  },
	  reduce(state){
	    state.count --;
	  }
	};

这样每次就是递增 10

简化 html 里的代码

    <button @click="$store.commit('add',10)">+</button>
      <button @click="reduce">-</button>

假设上面的 button 我们只想用@click="reduce" 首先引入

    import {mapState,mapMutations} from 'vuex';

然后写一个方法

    methods:mapMutations(['add','reduce']),

这样也是能达到上面的效果的。

getters 计算过滤

假设我们需要在上面点击+—的时候每次多计算一百，这时候就相当于有一道多的过滤计算在里面 store.js 写入

    const getters={
	  count:function (state) {
	    return state.count+=100;
	  }
	};

下面也需要注册

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

然后我们到模板去，这里因为之前的 computedmapState 占用了，我们需要一个 ES6 的拓展语法

    computed:{
      ...mapState(['count']),
      count(){
        return this.$store.getters.count
      }
    },

这样每次就能多计算 100 了，同理，我们也能简写这个，需要在 import 里声明

    import {mapState,mapMutations,mapGetters} from 'vuex';

然后修改 computed

    computed:{
      ...mapState(['count']),
      ...mapGetters(['count']),
    }

action 异步修改状态

上面 mutations 是属于同步修改，而 action 是针对异步修改的 store.js 写入

    const actions = {
	  addAction(context){
	    context.commit('add',10);
	    setTimeout(()=>{context.commit('reduce')},5000);
	  },
	  reduceAction({commit}){
	    commit('reduce')
	  }
	};

上方 setTimeout 里设置了一个在点击后加 10 然后过 5 秒减 1 的方法，同样需要注册 actions

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

然后在模板里新做两个按钮

    <p>
      <button @click="addAction">+</button>
      <button @click="reduceAction">-</button>
    </p>

声明调用 mapActions

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';

然后在方法里写

    methods:{
      ...mapMutations(['add','reduce']),
      ...mapActions(['addAction','reduceAction'])
    },

这样就能异步的去执行减 1 的操作了

module 模块组

在很大项目的时候，通常不同的前端需要有自己不同引用的东西，这时候 vue 就有了一个模块组声明一个模块组 A，然后注册他

const moduleA = {
state,mutations,getters,actions
};
const moduleB = {
state,mutations
};
export default new Vuex.Store({
modules:{a:moduleA,b:moduleB}
})

这时候我们就能在页面中调用这个模块组了，假设某个页面我只需要 state 和 mutations 两个方法

computed:{
count(){
return this.$store.state.b.count
}
},

html 里正常使用<h3>{{ count }}</h3>即可。