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

      发布在:Notes, 前端技术      评论:0 条评论

快速上手

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>即可。

Responses