Vuex介绍

最新推荐文章于 2021-10-07 10:02:42 发布

qq_37717458

最新推荐文章于 2021-10-07 10:02:42 发布

阅读量130

点赞数

分类专栏：学习笔记文章标签： vuex

本文链接：https://blog.csdn.net/qq_37717458/article/details/88672905

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vex介绍

State

State是唯一的数据源
单一状态树

const Counter = {
    template:'<div>{{count}}</div>',
    computed:{
        count(){
            return this.$store.state.count
            //this.$store为Vuex的对象
        }
    }
}

Getters

通过Getters可以派生出一些新的状态

const store = new Vuex.Store({
    state:{
        todos:[
            {id:1,text:'...',done:true},
            {id:2,text:'...',done:false},
        ]
    },
    getters: {
        doneTodos:state =>{
            return state.todos.filter(todo=>todo.done)//只选择出done属性为true的todos数组里的事件
        }
    }
})

Mutations

更改Vuex的store中的状态的唯一的方法是提交mutation

const store = new Vuex.Store({
  state:{
      count: 1
  },
  mutations:{
      increment(state){
      //变更状态
          state.count++;
      }
  }
})
//调用mutations中的函数
store.commit('increment')

Actions

action提交的是mutation,而不是直接变更状态
action可以包含任意异步操作

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++;
        }
    },
    actions: {
        increment(context){
            context.commit('increment')
        }
    }
})

Modules

面对复杂的应用程序，当管理的状态比较多时，我们需要将Vuex的store对象分割成模块（modules）

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

Vuex的示例之使用state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuex</title>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<div id="app">
  <h2>{{msg}}</h2>
  <counter></counter>
</div>
<script>
  //设置counter组件
  const counter ={
    template:`<div>{{count}}</div>`,
    computed:{
      count(){
        return this.$store.state.count;
      }
    }
  }
  //设置Vuex
  const storeVuex =new Vuex.Store({
    state:{
      count:10
    }
  });
  new Vue({
    el:"#app",
    store:storeVuex,//在vue中的store属性为Vuex的实例
    data:{
      msg:'Vuex的使用'
    },
    components: {
      counter
    }
  })
</script>
</body>
</html>

对比不使用vuex

<div id="app">
  <h2>{{msg}}</h2>
  <counter v-bind:count="count"></counter>
</div>
<script>
  //设置counter组件
  const counter ={
    template:`<div>{{count}}</div>`,
    props:['count']
  }
  //设置Vuex
  /*
  const storeVuex =new Vuex.Store({
    state:{
      count:10
    }
  });
  */
  new Vue({
    el:"#app",
    //store:storeVuex,//在vue中的store属性为Vuex的实例
    data:{
      count: 15,
      msg:'Vuex的使用'
    },
    components: {
      counter
    }
  })
</script>

运用Vuex中的mutation改变Vuex实例的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuex</title>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<div id="app">
  <h2>{{msg}}</h2>
  <a href="javascript:;" @click="add">click</a>
  <counter ></counter>
</div>
<script>
  //设置counter组件
  const counter ={
    template:`<div>{{count}}</div>`,
    computed:{
      count(){
        return this.$store.state.count;
      }
    }
  }
  //设置Vuex
  const storeVuex =new Vuex.Store({
    state:{
      count:10
    },
    mutations: {
      increment(state){
        return state.count++;
      }
    }
  });
  new Vue({
    el:"#app",
    store:storeVuex,//在vue中的store属性为Vuex的实例
    data:{
      msg:'Vuex的使用'
    },
    components: {
      counter
    },
    methods:{
      add(){
      //设置点击的方法来调用Vuex的mutations中的方法increment
        this.$store.commit('increment')

      }
    }
  })
</script>
</body>
</html>

上述代码效果，通过点击click，可以实现count的++事件

使用action

const storeVuex =new Vuex.Store({
  state:{
    count:10
  },
  mutations: {
    increment(state, num){
      return state.count = num;
    }
  },
  actions:{
    incrementAction(context, num){
      context.commit("increment", num);
    }
  }
});
new Vue({
  el:"#app",
  store:storeVuex,//在vue中的store属性为Vuex的实例
  data:{
    msg:'Vuex的使用'
  },
  components: {
    counter
  },
  methods:{
    add(){
      this.$store.dispatch('incrementAction', 5)
    }
  }
})

getter的使用实例

<body>
<div id="app">
  <h2>{{msg}}</h2>
  <a href="javascript:;" @click="add">click</a>
  <counter ></counter>
</div>
<script>
  //设置counter组件
  const counter ={
    template:`<div>
<div>点击数量：{{count}}</div>
<div>用户名：{{userName}}</div>
</div>`,
    computed:{
      count(){
        return this.$store.state.count;
      },
      userName(){
        return this.$store.getters.userName;
      }
    }
  }
  //设置Vuex
  const storeVuex =new Vuex.Store({
    state:{
      count:10,
      name:'jack'
    },
    mutations: {
      increment(state, num){
        return state.count = num;
      }
    },
    actions:{
      incrementAction(context, num){
        context.commit("increment", num);
      }
    },
    getters:{
      userName(state){
        return state.name + ',Hello'
      }
    }
  });
  new Vue({
    el:"#app",
    store:storeVuex,//在vue中的store属性为Vuex的实例
    data:{
      msg:'Vuex的使用'
    },
    components: {
      counter
    },
    methods:{
      add(){
        this.$store.dispatch('incrementAction', 5)
      }
    }
  })
</script>
</body>

qq_37717458

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuex介绍

Vuex介绍组成组成组成数据源派生新状态更改State中的状态异步操作提交mutationmoduleAVuexmoduleBmoduleCStateGettersMutationsActionsStateState是唯一的数据源单一状态树const Counter = { template:'<div>{{count}}</div>', co...
复制链接

扫一扫