9.Vuex的使用

最新推荐文章于 2024-01-08 17:44:29 发布
最新推荐文章于 2024-01-08 17:44:29 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： Vue 文章标签： Vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzb348110175/article/details/89289131
版权

Vuex基本用法

       1.通过npm安装Vuex    

           npm install --save-dev vuex

       2.在src目录下，新建一个名为vuex的文件夹，然后在文件夹下新建一个store.js文件，来存放Vuex状态信息           

       3.新建Vuex配置，并将其通过export default暴露出去

import Vue from "vue";
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        count: 10
    }
})

        4.在mainjs中引入vuex后，即可正常使用

import Vue from 'vue'
import App from './App'
import router from './router/index'
import store from './vuex/store'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    store,//store即为vuex配置，此处等价于store:store
    components: {App},
    template: '<App/>'
})

        仓库 store 包含了应用的数据（状态）和操作过程。 Vuex 里的数据都是响应式的，任何组件使 用同－ store 的数据时，只要 store 的数据变化，对应的组件也会立即更新。   

        数据保存在 Vuex 选项的 state 字段  

        5.在组件中直接使用即可

<template>
    <div>
        {{$store.state.count}} //1.可以直接使用，如果觉得乱的话，可以使用computed计算属性
        {{count}}
    </div>
</template>

<script>
    export default {
        name: "vFooter",
        data(){
            return{
                data:'我是Footer'
            }
        },
        computed:{//2.此处为通过计算属性来使用
            count(){
                return this.$store.state.count;
            }
        }
    }
</script>

           6.然后，引入该组件，既可以查看到该信息的显示

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <v-footer></v-footer>
    </div>
</template>

<script>
    import vFooter from './components/vFooter'

    export default {
        name: 'App',
        components:{vFooter},
        data() {
            return{}
        }
    }
</script>

<style scoped>
    #app {
        text-align: center;
    }
</style>

        7.store中数据已经显示出来

       8.那么存在store中的数据如何改变呢？

        在组件内，来自 store 的数据只能读取，不能手动改变。改变 store 中数据的唯一途径就是显式地提交 mutations

        刚才使用的state是Vuex的第一个选项，此处的mutations是Vuex的第二个选项，该选项用来修改state中的数据的，比如我们现在给刚才的实例增加2个mutations，用来加1和减1。

import Vue from "vue";
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        count:10
    },
    mutations:{//新增2个mutations
        increment(state){
            state.count ++;
        },
        decrease(state){
            state.count--;
        }
    }
})

         9.在组件内，有两种方法来执行mutations

         第一种：通过this.$store.commit方法来执行mutations。在组件中定义两个按钮，分别绑定事件为+1和-1

<template>
    <div>
        {{$store.state.count}}<hr>
        <button @click="add1()">mutations加1</button>
        <button @click="reduce1()">mutations减1</button>
    </div>
</template>

<script>
    export default {
        name: "vFooter",
        data(){
            return{
                data:'我是Footer'
            }
        },
        computed:{
            count(){
                return this.$store.state.count;
            }
        },
        methods:{//1.定义两个方法，分别为add1和reduce1
            add1(){
                return this.$store.commit('increment');//2.通过this.$store.commit()来执行mutations
            },
            reduce1(){
                return this.$store.commit('decrease');
            }
        }
    }
</script>

<style scoped>

</style>

         第二种：通过this.$store.commit方法，直接使用包含type属性的对象。如下所示

mutations:{
    increment(state,params){
        state.count +=params.count;
    }
}
export default({
    methods:{
        imcrement(){
            this.$store.commit({
                //通过包含type属性的对象来执行mutations
                type:'increment',
                count:10
            })
        }
    }
})

        10.如图所示，即可看到store中的count已经被修改了

        mutations 还可以接受第二个参数，可以是数字、字符x串或对象等类型(当一个参数不够时，也可以传递一个对象，无限扩展，不要局限于只能传递一个参数的思维)。比如每次增加的不是 1， 而是指定的数量，可以这样改写：

//部分代码省略
mutations:{
    increment(state,n=1){
        state.count +=n;
    }
}

//在ES6中可以为函数的参数设置默认值，如上所示n=1。当没有传入参数时，使用默认值

//在组件中使用this.$store.commit()来执行mutations，如下
export default({
    methods:{
        imcrement(){
            this.$store.commit('increment',5);
        }
    }
})

//当一个参数不够用时，可以传入一个对象，无限扩展

        注意：mutation 里尽量不要异步操作数据。如果异步操作数据了，组件在 commit 后，数据不能立即改变，而且不知道什么时候会改变

Vuex高级用法

      Vuex 还有其他 3 个选项可以使用： getters、 actions、 modules。

     1.getters

       有这样的一个场景： Vuex 定义了某个数据 list， 它是一个数组，如果只想得到小于 10 的数据，最容易想到的方法可能是在组件的计算属性里进行过滤。这样写完全没有问题。但如果还有其他的组件也需要过滤后的数据时，就得把 computed 的代 码完全复制一份，而且需要修改过滤方法时，每个用到的组件都得修改，这明显不是我们期望的结 果。如果能将 computed的方法也提取出来就方便多了， getters 就是来做这件事的。 

//store.js
import Vue from "vue";
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        count:10,
        list:[1,5,8,10,30,50]  //list数据
    },
    mutations:{
        increment(state,params){
            state.count += params.count;
        },
        decrease(state){
            state.count--;
        }
    },
    getters:{ //getters方法
        filterList:(state)=>{
            return state.list.filter(item=>item%2==0)
        }
    }
})
//vFooter.vue
<template>
    <div>
        {{$store.state.count}}<hr>
        <button @click="add1()">mutations加1</button>
        <button @click="reduce1()">mutations减1</button><hr>
        <span>通过计算属性computed：</span>{{filterList}} <hr>
        <span>通过Vuex中getters方法：</span>{{getterList}}
    </div>
</template>

<script>
    export default {
        name: "vFooter",
        computed:{
            count(){
                return this.$store.state.count;
            },
            filterList(){//计算属性获取
                return this.$store.state.list.filter((item)=>{return item%2==0})
            },
            getterList(){//通过vuex属性getters获取
                return this.$store.getters.filterList
            }
        },
        methods:{
            add1(){
                return this.$store.commit({
                    type:'increment',
                    count:88
                })
            },
            reduce1(){
                return this.$store.commit('decrease');
            }
        }
    }
</script>

        这种用法与组件的计算属性非常像。getter也可以依赖其他的 getterr，把 getter 作为第二个参数。 比如再写一个 getter，计算出 list 过滤后的结果的数量（listCount)：

//其他代码省略
getters:{
    filterList:(state)=>{
        return state.list.filter(item=>item%2==0)
    },
    listCount:(state,getters)=>{//将getters作为参数，传递到名称为listCount的getter中
        return getters.filterList.length;
    }
}

然后，在组件中，和之前使用filterList的用法一样。

<span>通过计算属性computed：</span>{{filterList}} <hr>
<span>通过Vuex中getters方法：</span>{{getterList}}<hr>
<span>listCount后list长度:</span>{{$store.getters.listCount}}

//部分代码省略
export default({
    computed:{
        count(){
            return this.$store.state.count;
        },
        filterList(){
            return this.$store.state.list.filter((item)=>{return item%2==0})
        },
        getterList(){
            return this.$store.getters.filterList
        }
    }
})

执行结果如下图所示：

      2.actions

         mutations 里不应该异步操作数据，所以有了 actions 选项。

         actions与 mutations 很像， 不同的是 ①actions 里面提交的是 mutation   ②actions里面可以异步操作业务逻辑 

         ①actions 里面提交的是 mutation

         actions在组件内，通过$store.dispatch来触发，例如：使用actions来对之前实例中的count增加1

//store.js
//部分代码省略
export default new Vuex.Store({
    mutations:{
        //加1
        increment(state,params){
            state.count += params.count;
        },
        //减1
        decrease(state){
            state.count--;
        }
    },
    actions:{
        incrementByAction(context){//使用actions，来执行mutations中的increment，来使count加1
            context.commit('increment',{count:1})//因为本例 mutations中increment(state,params)有参数，所以此处也是两个参数
            // context.commit('increment')
        }
    }
})
//vFooter.vue
<template>
    <div>
        <button @click="addByActions()">actions加1</button>
    </div>
</template>
<script>
    export default {
        //部分代码省略
        methods:{
            addByActions(){
                //此处使用this.$store.dispatch来触发actions
                return this.$store.dispatch('incrementByAction');
            }
        }
    }
</script>

 执行结果如下图所示：

         ②actions里面可以异步操作业务逻辑 

             参见：https://blog.csdn.net/lzb348110175/article/details/89297973（未总结226）

       3.modules

       选项modules，用来将store分割到不同的模块。当你的项目足够大时，store里的state、getter、mutations、actions会非常多，都放在store.js里显然是不友好的，使用modules可以把它们写在不同的文件中。每个module都拥有自己的state、getters、mutations、actions，而且还可以多层嵌套。如下实例：

const moduleA = {
    state: {...},
    mutations: {...},
    actions: {...},
    getters: {...}
}

const moduleB = {
    state: {...},
    mutations: {...},
    actions: {...},
    getters: {...}
}

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

store.state.a  //moduleA的状态
store.state.b  //moduleB的状态

实例：

附：Vue篇目录：

    1.Vue组件之间传值问题                              2.v-model 用在组件中

    3.Vue.js 实战 调查问卷WebApp项目          4.vue-cli + webpack搭建Vue开发环境

    5. Vue简单问题汇总(持续更新...)                 6.Vue组件之间数据通信之Bus总线

    7.Vue-Router导航钩子(附Demo实例)         8.ES6箭头函数与普通函数的区别  

    9.Vuex的使用                                             10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数

   11.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题

   12.Vuex命名空间namespaced                   13.Vue axios的使用      

扛麻袋的少年
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue全家桶之vuex
yuan_me_da的博客
02-22 129
目录 简介&安装 状态(state)与变更(mutations) 派生状态(getters) 异步操作(actions) 简化方法 简介&安装 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态 1. 安装 vue add vuex 2. 概览 import Vue from 'vue' import Vuex fr...
Vue项目中常见问题(10)Vuex基本使用、模块式开发
qq_46368050的博客
05-14 538
gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 大家根据上传历史进行查找你需要的代码 1.Vuex是什么? Vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据V注意:并不是全部项目都需要Vuex,如果项目很小,完全不需要Vuex,如果项目很大,组件很多、数据很多,数据维护很费劲,可以用Vuex 2.Vuex的安装 在终端输入 npm instal...
vueditor:用Vue.js和Vuex.js编写的所见即所得编辑器
05-26
Vueditor 用Vue.js和Vuex.js编写的所见即所得编辑器需要Vue.js 2.0.0，Vuex.js 2.0.0及更高版本。 浏览器兼容性：Chrome，Firefox，Safari，IE 9+。 在线 截屏 特征 可客制化 轻量级，很少依赖 插件支持 安装 npm install vueditor 如果您希望通过脚本标签使用它，请下载最新版本的软件包，然后将vueditor.min.js ， vueditor.min.css添加到页面中。 用法 Vue.use（Vueditor，配置） 在以下情况下使用它： 只需要一个编辑器 需要多个编辑器，但共享相同的配置 import Vue from 'vue' import Vuex from 'vuex' import Vueditor from 'vueditor' import 'vueditor/dist/st
Vuex整理
weixin_45264424的博客
03-23 68
store文件夹下index.js： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { //不能执行异步操作，修改state add(state) { state.count++ }, addN(state, step) { state.count += step }
Vuex的基本使用
名人卷耶
09-22 180
一、基本用法 1、使用 安装vuex依赖包 npm i vuex - save 导入vuex包 [ store / index.js ] import Vue from 'vue' import Vuex from 'vuex' // 1、导入vuex包 Vue.use(Vuex) // 1、导入vuex包 // 2、创建 store 对象 export default new Vuex.Store({ state: { }, // state提供唯一的公共数据源，所有
vuex基本操作
RainyLin-SunnyLin的专栏
03-07 997
一.前言 　　vuex被称为是专为vue应用程序开发的的状态管理模式。它的作用使用一句话描述就是：让组件之间可以共享数据 　　话不多少，先抛开概念，我们写一个简单的示例感受一波。 二.项目开发环境 　　项目开发环境搭建请移步作者的另外一篇文章《使用vue-cli搭建项目开发环境》 　　本次的项目目录如下： 　　 三.安装vuex 　　使用vuex前需要先进行安装，安装命令：npm install vuex --save--dev 　　 四.创建和访问共享数据 1.使用vuex创建全局共
Vuex之store原理及使用指南
yan_dk的专栏
05-02 6031
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 引言 Vuex的store组件，主要存储应用中的状态，具体应用中如何来用呢？存储我们也可以使用缓存比如uni.setStorageSync(...) uni.getStorageSync()，来存储应用级的状态，也可以实现相应需求。单纯缓存数据可能并不能很好满足一定的业务场景，而且缓存数据是多样化的，状态的交互在应用中存在很多，不同模块间互
浅谈Vuex的使用
03-25 5733
正如Redux一样，当你不知道是否需要Vuex那就是不需要。不要因为想用Vuex而使用它。 用过Vue的人都知道，Vuex是Vue的一个全局状态管理模块，它的作用是多个组件共享状态及数据。
vuex
qq_40345853的博客
07-18 132
引入vuex 1.利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。 1 npm install vuex --save 需要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。 2.新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。...
vuex学习
莫笑忘的博客
12-19 498
vuex：专为vue.js开发的状态管理模式，主要包含以下几个部分：state，view，actions  其主要应用场景就是多个组件使用同一个变量时，兄弟组件无法传参，父子组件传参拷贝时原本的模式脆弱，通常会导致无法维护的代码。因此就把组件的共享状态抽离出来，以全局单例模式管理。（为解决每个组件中需要注入vuex，通过store选项，把store实例注入到所有子组件中，子组件可以通过thi...
Vue.js面试题.pdf
最新发布
05-01
9. Vue.js中的单文件组件（Single File Components）是什么？它有什么优势？ 10. Vue.js中的事件修饰符有哪些？请说明常用的事件修饰符及其作用。 11. Vue.js中如何实现表单输入数据的双向绑定？请描述v-model指令的...
2023高频前端面试题合集之Vue篇.docx
04-26
9. vue2.x 和 vuex3.x 渲染器的 diff 算法分别说一下？ 10. vue 组件的参数传递 11. Vue 的路由实现 12. vuex 是什么？怎么使用它？什么场景下我们会使用到 vuex 13. 说一下 v-if 与 v-show 的区别 14. 如何让 CSS ...
2023前端面试题vue专版
12-26
1.watch和computed的区别 2. Vue 的生命周期 ...16.使用 Vuex 管理数据，与直接在全局window下定义变量相比，有什 么区别或者说优势？ 17.Vuex 是通过什么方式提供响应式数据的？ 18.Vuex 原理 等等
mastering-vuex
04-04
真实世界 跟着呢？ 我们鼓励您按照Vue Mastery上的课程学习，并...9-使用Axios进行API调用 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint
VUEX的store用法
CRMEB小程序商城的博客
12-16 9935
重新搭建项目 进入以个文件夹：cd vuewebpackapp 初始化这个项目：vue init webpack vuexapp 一系列的选择确认后 就会创建好文件 在搭建好的环境中操作 父组件传递数据给子组件 在components新建parent.vue（父组件）和一个son.vue子组件； 在父组件内引入子组件import son from ‘./son’,并传msg给子组件 子组件如何接收父组件传递的内容： helloworld.vue 子组件传数据给父组件 父组件从子组件接收数据，如何设置
Vuex基础用法和Vuex中的store
weixin_58431406的博客
06-17 1952
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，Vuex 中可以存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等，我们可以放在统一的地方，对它进行保存和管理。...............
vuex的Store简单使用过程
qq_42250281的博客
01-08 458
Store的代码结构一般由State、Getters、Mutation、Actions这四种组成，也可以理解Store是一个容器，Store里面的状态与单纯的全局变量是不一样的，无法直接改变store中的状态。想要改变store中的状态，只有一个办法，显示地提交mutation。由于mutation必须同步执行的限制，不方便实现复杂的功能。不过，别担心，看见了那个Actions吗？#vuex的Store简单使用过程。
VUEX基础入门Store使用详解
小小默：进无止境
11-19 7267
【1】vuex 是什么 github 站点: https://github.com/vuejs/vuex 在线文档: https://vuex.vuejs.org/zh-cn/ 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。 当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高
Vuex学习笔记
Fanor_的博客
10-10 378
全文参考：https://vuex.vuejs.org/zh/ 介绍 Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 什么是“状态管理模式”？ 参考： link. 安装 npm install vuex --save
vuex持久化存储vuex模块
11-20
为了实现Vuex模块的持久化存储，可以使用vuex-persistedstate插件。下面是实现Vuex模块持久化存储的步骤： 1. 安装vuex-persistedstate插件： ```shell npm i vuex[email protected] ``` 2. 在Vuex store中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

扛麻袋的少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值