vuex - 操作使用

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量397 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34111842/article/details/127896496
版权

安装vuex：npm install vuex -S

vuex中一共有五个状态：state，getter，mutation，action，module

在src新建 store 文件夹，并且新建 index.js

在 mian.js 全局挂载 vuex:

import { createApp } from 'vue'
import vuex from './store'
import App from './App.vue'

createApp(App).use(vuex).mount('#app')

如何使用？在store/index.js里:

import { createStore } from 'vuex'

const store = createStore({
    state:{
        name:"小明"
    }
})
export default store

1.State：

提供唯一的公共数据源，所有共享的数据统一放在store的state进行存储，类似于vue的data / return

<template>
  <div>
    <!-- 在标签中直接使用 -->
    <p>{{ $store.state.name }} - {{ $store.state.age }} - {{ $store.state.age ? '男' : '女' }}</p>
    <p>{{ getName }}</p>
    <!-- 通过mapState获取，在页面中直接使用，辅助函数 -->
    <p>{{ name + age + sex }}</p>
  </div>
</template>
<script>
// 使用 mapState 导出
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  mounted() {
    // 全局使用
    console.log(this.$store.state.name)
  },
  computed: {
    // 通过mapState函数导出变量并获取值
    ...mapState(["name", "age", "sex"]),
    getName() {
      return "myName is : " + this.name
    }
  }
}
</script>

2.Mutation:

* 同步操作触发方法：

第一种方法是this.$store.commit("mutation声明的方法")

第二种方法是通过mapMutations抛出，直接在methods里通过声明的方法触发mutations声明的方法

案例1：使用commit触发Mutation操作：

store/index.js:

import { createStore } from "vuex";

const store = createStore({
  state: {
    index: 1,
  },
  mutations: {
    getInfo1(state, params) {
        if(state.index < 99){
            state.index = +state.index + params;
        }
    },
    getInfo2(state) {
      if(state.index > 1){
        state.index--;
      }
    },
  },
});
export default store;

index:

<template>
  <div>
    <button @click="handleChange2">-</button>
    <input type="text" v-model="$store.state.index" />
    <button @click="handleChange1">+</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() { },
  methods: {
    handleChange1() {
      this.$store.commit("getInfo1", 1)
    },
    handleChange2() {
      this.$store.commit("getInfo2")
    }
  }
}
</script>

案例2：使用辅助函数进行操作，具体方法同上：

store/index.js:

import { createStore } from "vuex";

const store = createStore({
  state: {
    index: 1,
  },
  mutations: {
    getInfo1(state, params) {
        if(state.index < 99){
            state.index = +state.index + params;
        }
    },
    getInfo2(state) {
      if(state.index > 1){
        state.index--;
      }
    },
  },
});
export default store;

index:

<template>
  <div>
    <button @click="handleChange2">-</button>
    <input type="text" v-model="$store.state.index" />
    <button @click="handleChange1">+</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {}
  },
  mounted() { },
  methods: {
    ...mapMutations(["getInfo1","getInfo2"]),
    handleChange1() {
      this.getInfo1(1)
    },
    handleChange2() {
      this.getInfo2()
    }
  }
}
</script>

3.Action：异步操作

* 异步操作触发方法：

第一种方法是this.$store.dispatch("mutation声明的方法")

第二种方法是通过mapActions抛出，直接在methods里通过声明的方法触发

store/index.js:

import { createStore } from "vuex";

const store = createStore({
  state: {},
  mutations: {
    handleFn() {
      alert(123);
    },
  },
  actions: {
    getInfo3(content) {
      setTimeout(() => {
        content.commit("handleFn");
      }, 1000);
    },
  },
});
export default store;

index.js

<template>
  <div>
    <button @click="handleChange3">aaa</button>
  </div>
</template>
<script>
import { mapActions, mapMutations } from 'vuex';
export default {
  data() {
    return {}
  },
  mounted() { },
  methods: {
    ...mapActions(["getInfo3"]),
    handleChange3(){
      this.getInfo3()
    }
  }
}
</script>

4.Getters:

Getters类似于vue中的computed，进行缓存，对store中的数据进行加工

mapGetters语法：

import { mapGetters } from 'vuex
export default {
    computed: {
        ...mapGetters(['计算属性名'])

        ...mapGetters('模块名',['计算属性名'])

        ...mapGetters('模块名',['新计算属性名','新计算属性名'])
    }
}

案例1：

store/index.js:

import { createStore } from "vuex";

const store = createStore({
  state: {
    name: "aabbcc",
  },
  getters: {
    getInfo4(state) {
      return state.name + "zzz";
    },
  },
});
export default store;

index:

<template>
  <div>
    {{searchMsg}}
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() { },
  computed:{
    searchMsg(){
      return this.$store.getters.getInfo4
    }
  }
}
</script>

案例2：

store/index.js:

import { createStore } from "vuex";

const store = createStore({
  state: {
    nameObj: {
        aaa:"xxx",
        bbb:"yyy",
        ccc:"zzz"
    },
  },
  getters: {
    nameObj: state => state.nameObj || {}
  },
});
export default store;

index.js:

<template>
  <div>
    {{searchMsg}}
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  mounted() { },
  computed:{
    ...mapGetters(["nameObj"]),
    searchMsg(){
      return this.nameObj
    }
  }
}
</script>

案例3：购物车案例

store/index.js:

import { createStore } from "vuex";
const store = createStore({
  state: {
    shopList: [
      {
        shopName: "精品男装运动裤",
        shopNum: 1,
        shopPrice: 599,
      },
      {
        shopName: "kappa男装外套",
        shopNum: 1,
        shopPrice: 399,
      },
      {
        shopName: "精品男装运动鞋",
        shopNum: 1,
        shopPrice: 299,
      },
    ],
  },
  mutations: {
    add(state, params) {
      const index = params.index;
      const num = state.shopList[index].shopNum;
      if (num < 99) {
        state.shopList[index].shopNum = +num + params.num;
      }
    },
    reduce(state, params) {
      const index = params.index;
      const num = state.shopList[index].shopNum;
      if (num > 1) {
        state.shopList[index].shopNum--;
      }
    },
  },
  getters: {
    shopData(state) {
      return state.shopList;
    },
    shopPrice(state) {
      return state.shopList.reduce((a, b) => {
        return a + b.shopPrice * b.shopNum;
      }, 0);
    },
  },
});
export default store;

index:

<template>
  <div>
    <table border="1" width="400" cellpadding="5">
      <tr>
        <th>商品名称</th>
        <th>商品个数</th>
        <th>商品价格</th>
      </tr>
      <tr v-for="(item,index) in shopList" :key="index">
        <td align="center">{{item.shopName}}</td>
        <td align="center">
          <button @click="handleReduce({num:1,index:index})">-</button>
          <input type="text" v-model="item.shopNum" style="width:30px;text-align: center;margin:0 5px;" />
          <button @click="handleAdd({num:1,index:index})">+</button>
        </td>
        <td align="center">{{item.shopPrice * item.shopNum}}</td>
      </tr>
      <tr>
        <td colspan="3" align="right">商品总价 : {{shopTotal}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  mounted() { },
  computed:{
    ...mapGetters(["shopData","shopPrice"]),
    shopList(){
      return this.shopData
    },
    shopTotal(){
      return this.shopPrice
    }
  },
  methods:{
    ...mapMutations(['add','reduce']),
    handleReduce(params){
      this.reduce(params)
    },
    handleAdd(params){
      this.add(params)
    }
  }
}
</script>

5.Modules:

Vuex 允许我们将 store 分割成模块(module) 每个模块拥有自己的 state mutation action getter 甚至是嵌套子模块——从上至下进行同样方式的分割:

store/index.js:

import { createStore } from "vuex";
const modulesA = ({
  state: {
    name:"aaa"
  }
});
const store2 = createStore({
    state:{},
    mutations:{},
    getters:{},
    actions:{},
    modules:{
        namespaced:true,
        A:modulesA
    }
})
export default store2;

index.js

<template>
  <div>
    {{$store.state.A.name}} // aaa
  </div>
</template>

2.vue存储数据 / 获取数据

store/index.js:

import { createStore } from "vuex";

const store2 = createStore({
    state:{
        formData:{
            userName:"",
            passWord:""
        }
    },
    mutations:{
        toLogin(state,params){
            state.formData = params
        }
    },
    getters:{},
    actions:{},
    modules:{}
})
export default store2

index.vue:

<template>
  <div>
    <div>
      username：<input type="text" v-model="formData.userName" />
    </div>
    <div>
      password：<input type="password" v-model="formData.passWord" />
    </div>
    <div>
      <button @click="handleLogin">Login</button>
    </div>
    {{$store.state.formData}}
  </div>
</template>
<script>
  import { mapMutations } from 'vuex';
  export default {
    data(){
      return {
        formData:{
          userName:"",
          passWord:""
        }
      }
    },
    methods:{
      ...mapMutations(['toLogin']),
      handleLogin(){
        // 第一种写法
        this.toLogin(this.formData)
        // 第二种写法
        this.$store.commit("toLogin",this.formData)
      }
    }
  }
</script>

3.持久化存储

1) 自己实现一个持久化本地存储

新建一个 SesstionUtils.js

export class SesstionUtils {
  static get(key) {
    return JSON.parse(window.sessionStorage.getItem(key));
  }
  static set(key, value) {
    window.sessionStorage.setItem(key, JSON.stringify(value));
  }
  static remove(key) {
    window.sessionStorage.removeItem(key);
  }
}

index.vue

import { createStore } from "vuex";
import { SesstionUtils } from "./SessionUtils";

const store2 = createStore({
  state: {
    formData: SesstionUtils.get("loginInfo") || {},
  },
  mutations: {
    toLogin(state, params) {
      state.formData = params;
      SesstionUtils.set("loginInfo", state.formData);
    },
  },
  getters: {},
  actions: {},
  modules: {},
});
export default store2;

此时刷新浏览器，发现数据还在，并且在控制台的存储，可以看到通过本地存储的vuex数据

2) 通过 vuex-persistedstate 第三方插件实现：

npm install vuex-persistedstate --save-dev

如何使用：

store/index.js

import { createStore } from "vuex";
// 引用插件
import  createPersistedState from 'vuex-persistedstate'

const store2 = createStore({
    state:{
        formData:{
            userName:"",
            passWord:""
        }
    },
    mutations:{
        toLogin(state,params){
            state.formData = params
        }
    },
    getters:{},
    actions:{},
    modules:{},
    // 使用 数据持久化
    plugins: [
        createPersistedState({
            // 存储方式：localStorage、sessionStorage、cookies
            storage:window.sessionStorage,
            // 存储的 key 的key值
            key:"userInfo2",
            render(state){
                // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
                return {...state}
            }
        })
    ]
})
export default store2;

啦啦朵朵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue vuex 挂载_Vue $mount()手动挂载
weixin_39726408的博客
01-12 427
//$mount()手动挂载//1当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；//假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：newVue({router,render:h=>h(App)}).$mount("#app");//或者2newVue({el:'#app',router,render:h=>h(App...
vue vuex 挂载_Vuex 基本简单的使用
weixin_39629631的博客
12-19 531
适用场景1.全局共享数据，抛开繁琐的组件传值；2.什么数据适合全局共享？(组件的共享数据)；3.好处？(谁要用，直接获取，组件修改其他的也变化)；4.数据管理集中化，全局管理方便；如何在项目中使用vuex1.下载cnpm i vuex -S2.导入，挂载vuex(main.js中)//导入vueximport Vuex from 'vuex'//把vuex安装到vue中：Vue.use(Vuex...
VueX（Vue状态管理模式)
深圳最菜前端
10-13 290
一、初识VueX 1.1 关于VueX VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。 1.2 安装 由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCl
vue vuex 挂载_Vue项目--vuex的使用与理解
weixin_32602879的博客
01-15 586
1.在项目main.js中引入store，并挂载import store from './store'......new Vue({el: '#app',render: h => h(App),//把store对象提供给‘store’选项，这可以把store的实例注入所有的组件store})2.建立store仓库，结构如下image.png3.state的理解单一状态树我的理解就是：stat...
Vuex的安装到挂载
分享互联网的有趣知识~
06-17 827
vuex从入门到精通
Vuex使用
cedricdx的博客
09-26 814
Vuex使用简介为什么要用vuexVuex 应用场景单向数据流理念Vuex 有五种属性：State、Getter、Mutation、Action、ModuleVuex 核心流程不用Vuex会带来什么问题? 简介 Vuex 是一个专门为Vue.js应用程序开发的状态管理模式；也其实就是一个仓库管理着应用里面所有组件的状态。 为什么要用vuex 有的时候项目较大时，组件嵌套过多的时候，多组件共享同一个...
vuex使用
leilei7407的博客
07-11 268
输出this，state讲解中。看看是啥 this.&store??? 参考博客 参考博客 vuex的四大核心有state、getter、mutation以及action。 state State提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储 (state相等于vue组件中的data) getter getter 用于对 Store 中的数据进行加工处理形成新的数据，Store中的数据发生变化时，getter的数据也会跟着发生变化 即...
vuex-cache:调度时缓存vuex操作
05-12
Vuex缓存 缓存调度的动作，并防止重复... 导入createCache factory并在Vuex的插件上使用。 import Vue from 'vue' ; import Vuex , { Store } from 'vuex' ; import createCache from 'vuex-cache' ; const store =
vuex-dev.zip
12-19
这个压缩包“vuex-dev.zip”可能包含了用于开发 Vuex 应用的相关资源，如源代码、示例项目、文档等，帮助开发者更深入地理解和使用 Vuex。 Vuex 的核心概念主要包括 Store（存储）、State（状态）、Mutations（ ...
vuex-dry：[不再维护]`vuex-dry`有助于保持您的vuex代码干燥
02-04
它没有介绍使用vuex的任何全新方法。 它仅需最少的代码即可帮助您构建模块，并添加一些便捷的getter，变异和操作。 vuex-dry是用TypeScript编写的，因此对TypeScript友好。 安装 npm i vuex-dry -S 将插件添加到...
vue-vuex-router-master.zip
06-18
"vue-vuex-router-master.zip" 文件看起来是一个包含了预配置的 Vue.js 项目，整合了 Vuex 和 Vue Router，旨在提供一个完整的开发环境，以适应各种开发需求。 首先，让我们深入了解 Vue.js。Vue.js 的核心设计理念...
vue-vuex-registration-login-example:Vue + Vuex-用户注册和登录教程及示例
04-28
9. **Vuex模块化**：对于大型应用，Vuex的状态管理可以进一步模块化，将用户相关状态和操作封装在一个独立的模块中，以便更好地组织代码。 10. **响应式设计**：考虑到多设备访问，应用应该具有良好的响应式布局。...
vue vuex 挂载_vuex 笔记—vue-cli和router使用vuex
weixin_28756005的博客
12-29 161
vuex 笔记—vue-cli和router使用vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。安装vuex#以下三个方...
vue 安装并配置vuex
老段的CSDN的博客
08-16 400
配置成功后会出现这个页面 我这个是给谷歌浏览器安装了一个vue插件。感觉main页面里边配置内容太多,可以单独把vuex拉出来。2.全局配置 在main文件里边导入-安装-挂载。index.js页面。
[Vuex]介绍和安装使用
qq_29069649的博客
03-19 232
Vuex的介绍和安装使用
vue+vuex axios正确的全局挂载
Belle_Chou的博客
05-01 3372
https://segmentfault.com/q/1010000011814400
vue3之vuex的使用
seimeii的博客
08-04 517
vue3 使用vuex
vue项目中通过vuex管理数据
qq_73721069的博客
11-26 448
讲述了vuex的基本操作。包括构建vuex，vuex传值修改值。vuex的内部操作。vuex的分模块设计
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 369
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vuex-persistedstate 在uniapp使用
06-03
可以在uniapp中使用vuex-persistedstate来实现持久化存储，具体操作步骤如下： 1. 安装vuex-persistedstate：在uniapp项目中进入终端，执行npm install vuex-persistedstate --save命令进行安装。 2. 在store目录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值