vuex基础使用

最新推荐文章于 2024-06-21 15:14:18 发布

式微式微胡不归

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量187

点赞数

分类专栏： vuex 文章标签：前端 javascript

本文链接：https://blog.csdn.net/zhangli33/article/details/127108871

版权

vuex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、vuex的基本使用

二、vuex获取state中数据方法

1.通过$store获取{{$store.state.num}}

四、根据state中的数据变化自动计算处理数据

1.通过$store获取getters中的数据

2.通过辅助函数获取getters中的数据{{userage}}

五、异步的修改state中的数据

1.直接修改

2.通过辅助函数异步修改state中num的值

一、vuex的基本使用

下载vuex组件----yarn add vuex@3

二、vuex获取state中数据方法

1.通过$store获取{{$store.state.num}}

store-index.js

// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";

// 2.Vuex注册到Vue上
Vue.use(Vuex);

// 3.导出Vuex仓库实例
export default new Vuex.Store({
  // 存储数据的地方
  state: {
    num: 100,
    name: "zs",
  },
  //修改state中的数据
  mutations: {},
  //根据state中的数据变化自动计算处理数据
  getters: {},
  //异步的修改state中的数据
  actions: {},
  // modules: {},
});

app.vue

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
    <p>通过$store获取vuex中的数据{{$store.state.num}}</p>
    <p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
  </div>
</template>

2.通过辅助函数获取

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
    <p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['num','name'])
  }
};
</script>

三、修改state中的值

注意:mutations中的方法是唯一能够操作state中的数据方式

1.通过mutations修改

store-index.js

// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";

// 2.Vuex注册到Vue上
Vue.use(Vuex);

// 3.导出Vuex仓库实例
export default new Vuex.Store({
  // 存储数据的地方
  state: {
    num: 100,
    name: "zs",
  },
  //修改state中的数据
  mutations: {
    changeNum(state, data) {
      state.num += data;
    },
  },
  //根据state中的数据变化自动计算处理数据
  getters: {},
  //异步的修改state中的数据
  actions: {},
  // modules: {},
});

App.vue

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
    <p>通过$store获取vuex中的数据{{$store.state.num}}</p>
    <p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
   <button @click="$store.commit('changeNum',10)">修改state中num的值</button>
  </div>
</template>

2.通过辅助函数修改state中num值

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
    <p>通过$store获取vuex中的数据{{$store.state.num}}</p>
    <p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
   <button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    
  },

  methods: {
   ... mapMutations(['changeNum'])
  },
  computed: {
    ...mapState(['num','name'])
  }
};
</script>

<style lang="scss" scoped>

</style>

四、根据state中的数据变化自动计算处理数据

注意：getters中的方法一定要返回计算结果

1.通过$store获取getters中的数据

$store.getters.userage

store-index.js

// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";

// 2.Vuex注册到Vue上
Vue.use(Vuex);

// 3.导出Vuex仓库实例
export default new Vuex.Store({
  // 存储数据的地方
  state: {
    num: 100,
    name: "zs",
    user: {
      age: 18,
    },
  },
  //修改state中的数据
  mutations: {
    changeNum(state, data) {
      state.num += data;
    },
  },
  //根据state中的数据变化自动计算处理数据
  getters: {
    userage(state) {
      return state.user.age;
    },
  },
  //异步的修改state中的数据
  actions: {},
  // modules: {},
});

App.vue

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
    <p>通过$store获取vuex中的数据{{$store.state.num}}</p>
    <p>通过辅助函数获取vuex中的数据{{num}}{{name}}</p>
   <button @click="$store.commit('changeNum',10)">修改state中num的值</button>
   <button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
  <p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
  </div>
</template>

2.通过辅助函数获取getters中的数据{{userage}}

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
   <p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
   <p>通过辅助函数获取getters中的数据{{userage}}</p>
   <button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    
  },

  methods: {
   ... mapMutations(['changeNum'])
  },
  computed: {
    ...mapState(['num','name']),
    ...mapGetters(['userage'])
  }
};
</script>

五、异步的修改state中的数据

注意：actions中只负责处理异步逻辑，不能够直接修改state中的数据，如果需要修改state中的数据，还要通过触发mutations的方法去修改

1.直接修改

在actions中异步修改

store-index.js

// 1.引入Vue和Vuex
import Vue from "vue";
import Vuex from "vuex";

// 2.Vuex注册到Vue上
Vue.use(Vuex);

// 3.导出Vuex仓库实例
export default new Vuex.Store({
  // 存储数据的地方
  state: {
    num: 100,
    name: "zs",
    user: {
      age: 18,
    },
  },
  //修改state中的数据
  mutations: {
    changeNum(state, data) {
      state.num += data;
    },
  },
  //根据state中的数据变化自动计算处理数据
  getters: {
    userage(state) {
      return state.user.age + state.num;
    },
  },
  //异步的修改state中的数据
  actions: {
    changeNumAsync(context, data) {
      console.log(context, data);
      setTimeout(() => {
        context.commit("changeNum", data);
      }, 1000);
    },
  },
  // modules: {},
});

App.vue

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
   <p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
   <p>通过辅助函数获取getters中的数据{{userage}}</p>
   <button @click="changeNum(10)">使用辅助函数修改state中num的值</button>
   <button @click="$store.dispatch('changeNumAsync',100)">异步修改state中num的值</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
   ... mapMutations(['changeNum'])
  },
  computed: {
    ...mapState(['num','name']),
    ...mapGetters(['userage'])
  }
};
</script>

2.通过辅助函数异步修改state中num的值

<template>
  <div>
    <!-- 6.直接通过$store获取vuex中存储的数据 -->
   <p>通过$store获取getters中的数据{{$store.getters.userage}}</p>
   <p>通过辅助函数获取getters中的数据{{userage}}</p>
   
   <button @click="$store.dispatch('changeNumAsync',100)">异步修改state中的值</button>
   <button @click="changeNumAsync(100)">通过辅助函数异步修改state中的值</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
   ... mapMutations(['changeNum']),
   ...mapActions(['changeNumAsync'])
  },
  computed: {
    ...mapState(['num','name']),
    ...mapGetters(['userage'])
  }
};
</script>