精华内容
下载资源
问答
  • vue3store使用
    千次阅读
    2021-09-27 12:03:51

    关于在vue3脚手架创建的项目中初步使用store文件

    在用vue3脚手架创建完成后项目工程里出现store文件夹,里面有个index.js文件,根据查找网上的信息来看,里面都是存储一些全局变量、异步变量、状态管理之类的。在这里,我初步使用了一下这个文件,仅作个人感悟,很暴力的使用。

    先看一下脚手架生成的store文件

    import { createStore } from 'vuex'
    
    export default createStore({
      state: {
      // 放置变量所用
      },
      mutations: {
      // 获取set方法
      },
      actions: {
      },
      modules: {
      },
    })
    

    这里我先暂时用了两个方法,state和mutations,分别是放置全局变量和set方法

    在vuex官网上还有一个概念:Getter ,在这个方法里可以写get方法获取变量

    于是,修改过后的store文件如下

    import { createStore } from 'vuex'
    
    export default createStore({
      state: {
        url: "/api" + JSON.parse(window.sessionStorage.getItem("admin")).adminpic
      },
      getters: {
        geturl: state => state.url
      },
      mutations: {
        seturl(state,newurl){
          state.url = newurl
      	}
      },
      actions: {
      },
      modules: {
      },
    })
    

    这里存储了一个全局变量url、get方法和set方法

    然后在组件1中引用

    1.vue

    <script>
    export default {
    	data () {
    		return {
    			url: “”
    		}
    	},
    	created () {
    		this.url = this.$store.getters.geturl		//这里用get方法获取到变量
    	}
    }
    </script>
    

    在组件2中修改全局变量

    2.vue

    <script>
    export default {
    	data () {
    		return {
    			url: "111"
    		}
    	},
    	methods: {
    		change () {			// 这里是你自己随意定义的一个方法
    			this.$store.commit("seturl",this.url)	// 这里使用set方法对store中的变量进行更改
    		}
    	}
    }
    </script>
    

    经过change方法更改过后,store中的变量url就更改为111了

    组件2让store变量修改后因为组件1已经DOM渲染完了,所以如果想让组件1也随之改变,就需要对组件1的变量url进行监听

    监听代码如下:

    1.vue

    <script>
    export default {
    	data () {
    		return {
    			url: “”
    		}
    	},
        computed: {		// computed是计算属性,state里面的url改变之后,就会进行一次计算,并返回计算值到对应的参数中
            url () {
              return this.$store.state.url
            }
        },
        watch:{		// 监听属性,在computed计算属性更改之后会触发参数值的改变,所以能够监听到
          url () {
          // 这里会在commit之后触发,然后做后续的操作
            this.url = this.$store.getters.geturl
          }
        },
    	created () {
    		this.url = this.$store.getters.geturl		//这里用get方法获取到变量
    	}
    }
    </script>
    

    这样的话,在组件2中修改store全局变量后,组件1会检测到然后里面的变量也会随之修改

    当然,这是最粗暴的使用奥,若有不规范的,轻喷

    更多相关内容
  • vue3中router和store详细使用教程方法vuex和route
  • Vue3 store配置以及简单示例

    千次阅读 2022-03-19 14:22:59
    vue版本升级后store配置以及简单示例

    使用版本为2.9.6的vue配置store一直不成功,查阅相关资料发现大部分解决方案都是基于vue3,于是也将vue版本升级,两个版本的部分配置方法存在一定差异,在此记录一下。

    1. 首先升级vue版本

    npm uninstall vue-cli -g
    npm install -g @vue/cli@4.5.13
    

    如果安装速度过慢,尝试将远程源换成淘宝镜像

    2.创建新工程

    npm create vuedemo
    cd vuedemo
    npm run serve
    

    3.安装vue-router和vuex

    npm install vuex
    npm install vue-router
    

    4.创建src/store.js,简单配置state进行测试

    最初使用Vue.use(Vuex)报错,该种加载插件的方式为vue2版本使用

    import Vuex from 'vuex'
    const state = {
        name: "test"
    }
    const mutations = {
    }
    const getters = {
    }
    export default new Vuex.Store({
        state,
        mutations,
        getters
    })
    

    5.main.js挂载App(与vue2有区别)

    import { createApp } from 'vue'
    import App from './App.vue'
    import store from './store'
    const app = createApp(App)
    app.use(store)
    app.mount('#app')
    

    6.测试store能否正确读取,修改HelloWorld.vue

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data(){
        return{
          
        }
      },
      computed:{
        msg(){
          return this.$store.state.name;
        }
      }
    }
    </script>
    

    成功读取state
    在这里插入图片描述

    展开全文
  • vue3.0使用store的方法

    千次阅读 2022-04-25 20:53:15
    Vue全局变量store使用

    先在src目录下新建store文件夹并在其下面新建index.js

     一 、useStore()

    1. state

    state是用来定义数据,这里可以设置数据的默认数据,但是为了数据的安全性,通常不直接修改state数据,而是通过mutations修改,修改方法下面会介绍

    import { useStore } from "vuex";
    export default {
      setup() {
        const store = useStore();
        console.log(store.state.goods);
      },
    };

    2.getters

    getters用来处理数据,对state中的数据进行处理,得到自己想要的效果,当需要在多处组件使用这种数据时,gettters是你最好的选择

    import { useStore } from "vuex";
    export default {
      setup() {
        const store = useStore();
        console.log(store.getters['goodsData']);
      },
    };

    3. mutations

    mutations通常为修改state数据而使用,这用就可以避免直接修改state的数据

    import { useStore } from "vuex";
    export default {
      setup() {
        const store = useStore();
        store.commit('cahngeGoods',123)
      },
    };

     4.actions

    actions当你的数据是需要发送请求获取时,这是非常完美的选择

    import { useStore } from "vuex";
    export default {
      setup() {
        const store = useStore();
        async function abc() {
          await store.dispatch("setGoods", {
            id: 123,
          });
        }
        return {abc}
      },
    };

    展开全文
  • vue3分模块中vuex的使用,modules (分模块)

    存在两种情况 模块有开启命名空间和未开启命名空间的区别

    默认的模块(没有加命名空间的),state 区分模块,其他 getters mutations actions 都在全局。
    带命名空间 namespaced: true 的模块,所有功能区分模块,更高封装度和复用。
    开启命名空间,能让代码更加的独立,以后项目开发的时候都要开启命名空间

    store index.js 子模块的state建议写成函数,调用不变

    import { createStore } from "vuex";
    // A模块
    const moduleA = {
      state: {
        username: "moduleA",
      },
      getters: {
        newName (state) {
          return state.username + "!!!!";
        },
      },
      mutations: {
        updateName (state) {
          state.username = "moduleAAAA";
        },
      },
    };
    // B模块
    const moduleB = {
      namespaced: true,
      state: {
        username: "moduleB",
        age: 2
      },
      getters: {
        newName (state) {
          return state.username + "???";
        },
      },
      mutations: {
        // 更改数据函数
        updateName (state) {
          state.username = 'ls'
        },
        updateAge (state, playLoad) {
          console.log("playLoad", playLoad)
          state.age += playLoad
        }
      },
      actions: {
        // 请求数据函数
        updateName (ctx, count) {
          console.log('触发了')
          // 发请求
          setTimeout(() => {
            ctx.commit('updateAge', count)
          }, 1000)
        }
      },
    };
    export default createStore({
      // 分模块
      modules: {
        moduleA,
        moduleB,
      },
    });
    
    

    app.vue

    <template>
      <div id="container">
        <!-- 1、使用A模块的state数据 -->
        <p>{{ $store.state.moduleA.username }}</p>
        <!-- 2、使用A模块的getters数据 -->
        <p>{{ $store.getters.newName }}</p>
    
        <!-- 1、使用B模块的state数据 -->
        <p>{{ $store.state.moduleB.username }}</p>
        <!-- 2、使用B模块的getters数据 $store.getters['模块名/计算属性']-->
        <p>{{ $store.getters["moduleB/newName"] }}</p>
        <button @click="mutationsFn">mutationsFn</button>
        <button @click="actionsFn">actionsFn</button>
        <p>{{ $store.state.moduleB.age }}</p>
      </div>
    </template>
    <script>
    import { useStore } from "vuex";
    export default {
      name: "App",
      setup() {
        // userStore可以拿到vuex仓库实例
        const store = useStore();
        // 1、使用moduleA模块state的数据
        console.log(store);
        console.log(store.state.moduleA.username); // moduleA
        // 2、使用moduleA模块getters的数据
        console.log(store.getters.newName); // moduleA!!!!
    
        // 1、使用moduleB模块getters的数据
        console.log(store.getters["moduleB/newName"]); // moduleB???
    
        const mutationsFn = () => {
          // 提交B模块的更改
          store.commit('moduleB/updateName')
        };
        const actionsFn = () => {
          // 传参用法
          store.dispatch("moduleB/updateName", 6)
        };
        return {
          mutationsFn,
          actionsFn,
        };
      },
    };
    </script>
    <style lang='less' scoped>
    </style>
    

    在这里插入图片描述

    展开全文
  • 加快Vue项目的开发速度
  • vue使用store

    千次阅读 2021-02-25 11:25:03
    vue使用store,我的通俗理解是store里的是全局变量,只要改变变量后,其他页面在次使用,获取到的就是改变后的值。 src下创建store文件夹 index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...
  • vuestore使用

    2022-06-10 11:07:41
    vuestore使用
  • Vuestore 使用方法讲解

    千次阅读 2021-04-25 17:39:53
    vuex 包含有五个基本的对象: ...就和vue的computed差不多; mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.co
  • 本文章旨在快速帮助上手Pinia基础与核心部分。 Pinia 的主要 Api * createPinia ...- Store的核心配置: + State + Getters + Actions 与 Vuex 相比,Pinia 提供了一个更简单的 API,没那么死板。
  • Vue 关于Store的用法

    千次阅读 2022-01-29 14:21:06
    Store就是全局变量都是可以双向绑定的,以下是模块的用法: state定义的是变量名称,mutations里面是给变量赋值的方法 export default { namespaced: true, state: { //打开的Tabs tabs: null, //当前显示的...
  • vuestore使用

    万次阅读 2020-05-28 15:45:15
    1. 在package.json查看是否已安装vuex,在store目录下 module下存放不同模块 方便区分 type.js 中存放类型常量 2. 在main中引入 test.js import types from "../types"; // 全局变量 const state = { ...
  • vue3在setup函数中使用store中的数据并非是响应式的,需要使用计算属性,vue3使用store的注意项
  • vue3store

    2021-06-09 18:07:17
    vue3 在js中使用store import {useStore} from 'store' const store = useStore() vue
  • 本文记录了如何使用vuex建立响应式全局变量,内容有:按类别建立多模块、如何引入、使用、如何不借助第三方工具在localStorage、sessionStorage中实现数据持久化,以及vuex store state的赋值问题。
  • Vue3+TypeScript template中使用$store报错

    千次阅读 2022-02-10 11:23:44
    Vue3 + TypeScript 中在template会报找不到"$store"的警告 我使用的解决方法: 在 src/shims-vue.d.ts 文件中加入 declare let $store: any Stack Overflow: Stack Overflow 中类似问题的文章
  • Vuestore 基本用法

    万次阅读 2021-12-12 02:51:12
    store是一个管理状态,在vuex中使用。 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //这里放全局参数 }, mutations: { //这里是set方法 ...
  • vue项目 store.js使用

    千次阅读 2021-04-20 10:31:11
    2.创建store文件夹以及store.js文件 在根目录下,当然,这是因为我是用cil3创建的项目,导致没有store文件以及store.js文件 对了,如果你是在src文件夹下创建store文件夹,nastore.js要改名为index.js 开始: 1....
  • vue项目store引入

    千次阅读 2022-02-15 15:19:08
    import Vue from 'vue' import App from './App' var vue - new Vue({ el:'#app', router, store, il8n, render: h => h(App) }) export default vue router路由文件平级建立store文件夹 里面一个...
  • 文章目录前言1.vuex-module-decorators1.1 vuex传统方式的使用1.2 vuex装饰器的使用一、vuex-module-decorators组件1.state2.getter3.@Mutations4.@...在vue使用 前言 1.vuex-module-decorators vuex-module-decora
  • vuestore仓库中使用路由的方法

    千次阅读 2021-04-25 21:09:37
    在仓库中,this的指向指的是store,但是在一般的工程,我们有可能会需要在仓库中走路由等逻辑,这个时候就需要先找到全局vue,因为路由是vue的一个子模块 main.js window.Vue=vue const vue = new Vue({ el: '#...
  • vue3源码分析之use(store)

    千次阅读 2022-03-22 15:45:05
    vue3源码分析之use(store) 官方介绍use() 用来安装 Vue.js 插件。如果插件是一个对象,则它必须暴露一个 install 方法。如果插件本身是一个函数,则它将被视为 install 方法。 该 install 方法将以应用实例作为第一...
  • vue或Avue实现某个字段值的全局存储和获取
  • <script setup>vue3使用store

    千次阅读 2021-09-01 14:22:55
    const store = useStore() store.commit('watchRouterPath', arr); </script> import { createStore } from 'vuex' export default createStore({ state: { cont: 0 }, mutations: { watchRou.
  • 25 vue3使用vuex--- getters的使用

    千次阅读 2022-03-09 14:03:03
    24 vue3 vuex actions的使用_十一月的萧邦-CSDN博客 本篇记录vue3中 vuex getters的使用方式 默认进行了模块化的管理,开启了命名空间 目录: user.js写了两个示例,简单讲,就是一个不用传递参数,一个传递...
  • Vue Store用法大全

    千次阅读 2020-06-03 22:28:23
    Vue Store架构 从上述架构图可知,Vue组件通过调用dispatch()方法操作某个Action, 然后Action回操纵Mutation, 然后由Mutation操作State中的数据,而State中的数据改变之后,同时去改变Vue中的组件 基本用法 import ...
  • vue监听store中的数据

    千次阅读 2021-08-12 11:06:57
    return this.$store.state.msg } }, watch:{ haha:function () { //插入需要在仓库数据变化时做的逻辑处理 } } 数组对象 computed:{ groupFirst(){ return this.$store.state.group[0].id; } }, ...
  • vue3使用ts简化useStore并且想要返回类型化的store,mian.ts同样需要引用并且使用key值,简化的只是vue文件中使用store时不需要引用\使用key值官网中并没有说明这一点,踩了一上午的坑终于解决了~ const app = create...
  • vue使用store本地存储(长久性存储)

    千次阅读 2020-10-13 14:34:03
    vuex存储有个缺点:按f5刷新之后,数据就没有了。 store本地存储就是长久性的,数据...安装及使用:https://blog.csdn.net/xfcy514728/article/details/80278048 npm地址:https://www.npmjs.com/package/store ...
  • vue3中router路由和vuex的store使用方法

    千次阅读 2021-05-08 09:48:03
    import { useRouter, useRoute } from 'vue-router' export default { setup() { const router = useRouter() // 组件内路由 const route = useRoute() // 组件内路由信息 } } </script> 2.vuex 创建...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 92,191
精华内容 36,876
关键字:

vue3store使用