vuex的使用

lemon 发布于2019-08-02 10:14 / 611人阅读

摘要：使用状态对象的访问我把理解成构造器中的里面存放一些数据，例如用户姓名性别身份证号等等。

vuex是配合vue一块儿使用的一个状态管理工具。
我通常使用它来保存一些全局的数据，例如用户登录信息，用户身份信息，总之一些在很多页面都会使用到的信息，都保存在vuex里面，用的时候就不需要再去请求接口了，直接去vuex里面拿就可以了。
先放官网地址

安装

npm install vuex --save

配置

我实在vue-cli环境中使用vuex的，所以这里就以这个环境作为项目文件结构来写配置了。
先在src/assets文件夹中新建一个vuex/store.js文件，建好之后在文件中写如下代码：

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    }
})
export default store

在main.js中引入store.js:

import store from "@/assets/vuex/store";

在全局构造器中注册一下：（这里千万别忘了）

new Vue({
  el: "#app",
  router,
  components: { App },
  template: "",
  store: store   //在根实例下面注册store，相当于全局注册，可以全局调用
})

//题外话
//在vue-cli中，引入某些特定后缀的文件是不需要写全后缀的，就像上面这个store
//因为在config/webpack.base.conf.js文件中，有这样一段代码：
    resolve: {
        extensions: [".js", ".vue", ".json"],  //这些后缀的文件可以不写，可以自己随意添加
        alias: {   //模块别名定义，方便后续直接引用别名，无须多写长长的地址
          "vue$": "vue/dist/vue.esm.js",
          "@": resolve("src"),  //从src文件夹开始寻找文件
        }
    }

到这里，vuex已经在你的项目中安装好并且可以使用了。你只需要在vue的html的部分写上如下代码：

{{$store.state.name}}
       //页面中会显示"xiaoming"

或者在构造器里面写:

console.log(this.$store.state.name);      //打印"xiaoming"

html代码书写取值的时候可以不加this，script代码中必须加this。

使用

1.state状态对象的访问（我把state理解成vue构造器中的data）

state里面存放一些数据，例如用户姓名、性别、身份证号等等。之前我的访问方式是：

 {{$store.state.name}}

但是上面这种写法太长了，而且看起来不直观，查阅过文档之后我发现，访问state对象可以有以下三种写法：

//如果我想在页面中只写{{name}}，可以这样写：

 1. computed: {
        name() {
            return this.$store.state.name;
        }
    }
    
 2. import {mapState} from "vuex";
    computed: mapState({
        name: state => state.name    //es6箭头函数
    })
 
 3. import {mapState} from "vuex";
    computed: mapState(["name"]);    //这种写法最简单，推荐

2.访问mutations方法（我把mutations理解成vue构造器中的methods）

先在store.js中写上如下代码：

const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一个外部参数
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    }
})

原先我调用add和reduce方法的时候，写法是：

{{count}}

但是这种调用方法的写法也太长，需要写上$store.commit这种东西，太啰嗦。
模仿访问state的方法，它也有另外一种便捷的写法：

import {mapState,mapMutations} from "vuex";
methods: mapMutations(["add","reduce"]),
//需要注意的是，state写在computed里面，而mutations写在methods里面，因为它是在@click之后的方法

现在你可以这样调用它：

{{count}}

3.访问getters（我把getters理解成vue构造器中的computed）

getters就像一道门，每操作一次数据，都会经过一次它。

现在，在store.js中加入getters代码：

const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一个外部参数
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    },
    getters: {
        add100(state) {
            return state.conut += 100;   //每操作一次count，它都会加上100
        },
        changename(state) {
            return state.name + "c";     //每操作一次name，它都会拼接上一个c    
        }
    }
})

怎么调用它呢？模仿state的调用方法。
因为它们都是对数据进行操作，不涉及方法，所以getters也写在computed中。

import {mapState,mapMutations,mapGetters} from "vuex";

//现在来看computed的代码要怎么写
//在写state的时候，我们把computed中的代码写成了这样：
//computed: mapState(["name"]);
//那如果现在再加入mapGetters，就需要改变computed的样子，具体应该这样写：

computed: {
    ...mapState(["name","count"]),   //es6扩展运算符，用map必须得用这个，否则会报错
    ...mapGetters(["add100","changename"]),
    count2: function() {
        return this.$store.state.count;
    }
}

此时，每当你操作一次button按钮，无论是加法还是减法，它都会对count进行+100的操作。当然，此时的name是不会改变的，即使你引入了changename方法，但因为没有改变过name，所以就不会出发changename方法。

4.访问actions

actions与getters的用法相似，但是它是异步调用，写在methods里面。（说实话我是没看懂这个actions有啥用）

先来完善一下我们的store.js中的代码：

const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一个外部参数
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    },
    getters: {
        add100(state) {
            return state.conut += 100;   //每操作一次count，它都会加上100
        },
        changename(state) {
            return state.name + "c";     //每操作一次name，它都会拼接上一个c    
        }
    },
    actions: {
        add1(context) {                    //参数context即全局上下文对象，store
            context.commit("add",10);      //通过context调用add方法
            setTimeout(()=>{context.commit("reduce")},3000)
        },
        reduce1({commit}) {                //{commit}是另一种传参方式，一个封装好的commit
            commit("reduce");
        }
    }
})

写好actions方法了之后，就来调用它，调用方法跟mutations差不多：

methods: {
    ...mapMutations(["add","reduce"]),
    ...mapActions(["add1","reduce1"])，
    aa(i) {
        console.log(i)
    }
}

在html代码中使用：

reduce1方法调用了mutations中的reduce方法，每次点击减1；
add1调用了mutations中的add方法，每次点击加10，同时在3秒钟之后，会调用一次减法，减去1；
因为还有getters的设置，所以每次操作的时候还会再加100。

以上就是vuex的大致用法了，我平时只有state用的比较多。
我对vuex的理解很浅，如有不对的地方，请指正。

服务器托管私有云 Vuex vuex cdn Vue_Vuex 数组的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52213.html

Vuex源码学习（一）功能梳理

摘要：我们通常称之为状态管理模式，用于解决组件间通信的以及多组件共享状态等问题。创建指定命名空间的辅助函数，总结的功能首先分为两大类自己的实例使用为组件中使用便利而提供的辅助函数自己内部对数据状态有两种功能修改数据状态异步同步。 what is Vuex ? 这句话我想每个搜索过Vuex官网文档的人都看到过，在学习源码前，当然要有一些前提条件了。了解Vuex的作用，以及他的使用场景。 ...

livem 2019-08-23 16:11 评论0 收藏0
Vuex源码阅读笔记

摘要：而钻研最好的方式，就是阅读的源代码。整个的源代码，核心内容包括两部分。逃而动手脚的代码，就存在于源代码的中。整个源代码读下来一遍，虽然有些部分不太理解，但是对和一些代码的使用的理解又加深了一步。笔记中的Vue与Vuex版本为1.0.21和0.6.2,需要阅读者有使用Vue，Vuex，ES6的经验。起因俗话说得好，没有无缘无故的爱，也没有无缘无故的恨，更不会无缘无故的去阅读别人的源...

hosition 2019-08-21 13:44 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fai1017 2019-08-30 13:53 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

zilu 2019-08-26 11:35 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fjcgreat 2019-08-01 18:30 评论0 收藏0
vuex入门

摘要：使用，引入之后用进行引用。在模板中引入们刚建的文件，并在模板中用输出的值。在文件中加入两个改变的方法。和单纯的全局对象有以下两点不同的状态存储是响应式的。改变中的状态的唯一途径就是显式地提交。 vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通俗的解释就是，Vuex 就是为 vue 组件之间进行数据共享而开发的插件。 vuex 什么时候用？实现数据...

weakish 2019-08-23 16:56 评论0 收藏0