经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3.2中的vuex使用详解
来源:jb51  时间:2023/4/12 11:14:40  对本文有异议

Vuex 中有以下几个核心概念:

  • State:应用程序的状态存储在单一的状态树中,即 State。State 可以通过 store.state 属性访问。
  • Mutation:状态的变化必须通过提交 Mutation 来进行。Mutation 是一个包含 type 和 payload 属性的对象,type 是 Mutation 的类型,payload 是 Mutation 的有效负载。Mutation 通过 store.commit 方法提交。
  • Action:Action 用于异步操作或批量提交 Mutation。Action 是一个包含 type 和 payload 属性的对象,type 是 Action 的类型,payload 是 Action 的有效负载。Action 通过 store.dispatch 方法提交。
  • Getter:Getter 用于对 State 进行派生,可以通过 getter 函数计算衍生出新的状态。Getter 通过 store.getters 属性访问。
  • Module:Vuex 允许将应用程序的状态划分为模块,每个模块可以包含自己的 State、Mutation、Action 和 Getter。模块通过 store.module 属性添加到根状态中。安装 Vuex

 安装 vuex

  1. npm install vuex --save

 创建store

  1. import { createStore } from 'vuex'
  2. export default createStore({
  3. state: {
  4. },
  5. getters: {
  6. },
  7. mutations: {
  8. },
  9. actions: {
  10. },
  11. modules: {
  12. }
  13. })

使用vuex 在应用程序中使用 store

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. createApp(App).use(store).use(router).mount('#app')

 在项目中的实际引用

 这个例子是:

      点击一个按钮,累加,存到本地,刷新,接着累加不受影响

  1. import { createStore } from 'vuex'
  2. let n =parseInt(localStorage.getItem('keyvalue'))
  3. export default createStore({
  4. state: {
  5. num: n?n: 0
  6. },
  7. getters: {
  8. },
  9. mutations: {
  10. setNum(state,nums){
  11. // 累加++
  12. state.num += nums
  13. }
  14. },
  15. actions: {
  16. setNums(state,nums){
  17. // 累加++
  18. state.commit('setNum',nums)
  19. }
  20. },
  21. modules: {
  22. }
  23. })
  1. <template>
  2. <!-- 改变Vuex的值setNum -->
  3. <button @click="setNum">改变Vuex的值setNum</button>
  4. <p>{{ store.state.num }}</p>
  5. </template>
  6. <script setup>
  7. import { useRouter } from "vue-router";
  8. import { useStore } from "vuex";
  9. const useRouters = useRouter();
  10. // 引入useStore 方法
  11. const store = useStore(); // 该方法用于返回store 实例
  12. const setNum = () => {
  13. store.dispatch("setNums", 1);
  14. localStorage.setItem("keyvalue", store.state.num);
  15. };
  16. </script>

封装本地存储的方法和如何使用

  1. export default {
  2. save(key,value){
  3. localStorage.setItem(key,value)
  4. },
  5. remove(key){
  6. localStorage.removeItem(key)
  7. },
  8. get(key){
  9. return localStorage.getItem(key)
  10. }
  11. }

 结合 vuex 来使用

  1. //这个名字随便命名,尽量语义化一点
  2. import storage from '@/tools/storage.js'
  3. //存到vueX中
  4. store.commit("saveToken",res.data.data.token);
  5. // 将token存储到本地,方便取值 第一个参数是--名字 第二个是---存储的对象,数组或,变量
  6. storage.save("token",res.data.data.token)
  1. import { createStore } from 'vuex'
  2. // 引入
  3. import storage from '@/tools/storage.js'
  4. // 取值
  5. let token = storage.get("token");
  6. export default createStore({
  7. state: {
  8. // 防止刷新之后,丢失
  9. token:token?token:"",
  10. },
  11. getters: {
  12. },
  13. mutations: {
  14. // 将token存储到vuex中
  15. saveToken(state,token){
  16. state.token = token
  17. },
  18. },
  19. actions: {
  20. },
  21. modules: {
  22. }
  23. })

vuex----更加详细的使用

  1. import { createStore } from 'vuex'
  2. export default createStore({
  3. state: {
  4. count: 0
  5. },
  6. mutations: {
  7. increment(state) {
  8. state.count++;
  9. },
  10. decrement(state) {
  11. state.count--;
  12. }
  13. },
  14. actions: {
  15. incrementAsync({ commit }) {
  16. setTimeout(() => {
  17. commit('increment');
  18. }, 1000);
  19. }
  20. },
  21. getters: {
  22. squaredCount(state) {
  23. return state.count * state.count;
  24. }
  25. }
  26. })
  1. <template>
  2. <!-- 改变Vuex的值setNum -->
  3. <button @click="setNum">改变Vuex的值setNum</button>
  4. <div>
  5. <p>Count: {{ count }}</p>
  6. <button @click="increment">+</button>
  7. <button @click="decrement">-</button>
  8. <button @click="incrementAsync">+ (async)</button>
  9. <p>Squared count: {{ squaredCount }}</p>
  10. </div>
  11. </template>
  12. <script setup>
  13. // import { useRouter } from "vue-router";
  14. import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
  15. import { useStore } from "vuex";
  16. import { computed } from "vue";
  17. const store = useStore();
  18. const count = computed(() => store.state.count);
  19. const squaredCount = computed(() => store.getters.squaredCount);
  20. const increment = () => {
  21. store.commit("increment");
  22. };
  23. const decrement = () => {
  24. store.commit("decrement");
  25. };
  26. const incrementAsync = () => {
  27. store.dispatch("incrementAsync");
  28. };
  29. // import { useStore } from "vuex";
  30. // const useRouters = useRouter();
  31. // // 引入useStore 方法
  32. // const store = useStore(); // 该方法用于返回store 实例
  33. // const setNum = () => {
  34. // };
  35. </script>

以上就是简单的使用,供参考!@

到此这篇关于vue3.2中的vuex使用的文章就介绍到这了,更多相关vue3.2使用vuex内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号