VueX的详情

一、优点

Vuex状态管理跟使用传统全局变量的不同之处：

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commit）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。否则就全局都会修改

二、安装VueX步骤

1.安装

  cnpm install vuex-localstorage

2.引用VueX

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3.在引入Store

image.png

创建vuex的用法

import Vue from 'vue'
import Vuex from 'vuex'
import usersov from './user'
import createPersist from 'vuex-localstorage'

Vue.use(Vuex)

// 创建vuex 构造器
export default new Vuex.Store({
    state:{
        
    }
})

主要包括以下几个模块:

    1.State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
    2.Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
    3.Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
    4.Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
    5.Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

1.State

//state存储应用层的状态
state:{  // 声明数据
        // n:0,
        // username:'',
        shopCar:[ 1,2,3,4,5],
        count:5 
    },

2.Getter

 getters:{// 类似与  state 的计算属性 可以根据state中的数据的变化 计算出新的值
        rgetShopCarLen(state){
            var sum = 0
            console.log(state.shopCar);
            for(var i=0; i<state.shopCar.length; i++){
                sum+=state.shopCar[i]
            }
            return sum
        }
    }

3.Mutation

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方
 mutations:{ // 修改数据的 方法
        increment(state,val){     // 添加这个名字state就可以不用this
            // 变更状态
            state.count += val;
        },
       
    },

我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。

一般通过方法或钩子触发，例如：

methods: {
   getVal(item) {
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", item);
   }
 }

4.Action

// 用来保存用户信息的 store
export default {
     //存放数据
      state:{
        userInfo:{},
        key:''
    },
   //通过commit mutations中的方法来处理
    mutations:{
        // 定义接收用户信息的方法
        updateUserInfo(state,val){
            state.userInfo=val
            console.log(state.userInfo);
        },
        undateKey(state,val){
            state.key=val
        }
    },
    //接受dispatch传递过来的方法和参数
    actions:{
        undateKey(state,val){
            //处理异步操作
            setTimeout(() => {
                //通过commit提交一个名为getParam的mutation
                //action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation
                state.commit('undateKey',val)
            }, 0);
        }
    }
}
然后我们就在组件里这么调用就可以了
 methods: {
   getVal() {
      var name= 'xia';
      var age= '26';
      var sex= 'man';
      //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
      this.$store.dispatch('undateKey',{name,age,sex})

   }
 }
5.Module

随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'  // 模块
import createPersist from 'vuex-localstorage'

Vue.use(Vuex)

// 创建vuex 构造器
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    // 模块或模组
    modules:{
        user  // 引入的模块
    },
  
})

user.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后我们就在组件里这么调用就可以了

<template>
    <div class="demo">
        <h1>{{getText1}}</h1>
    </div>
</template>

computed: {
    getText1(){
        return this.$store.state.user.text;
    },
}

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问

vuex最最简单的项目实例

1.存储数据( a.vue文件 )

import { mapMutations } from "vuex"; // 引入mapMutations
export default {
    methods: {
        ...mapMutations({
            // 将changeNews与mutations中的SET_NEWS关联
            changeNews: "SET_NEWS"
        }),
        submit(){
            // 提交一个名为changeNews的mutation，并传入参数val
            let val = 'test news';
            this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
        }
    }
}

2.获取数据( b.vue文件 )

import { mapGetters } from "vuex"; // 引入mapGetters 
export default {
    computed: {
        // 用vuex读取数据(读取的是getters.js中的数据)
        // 相当于this.$store.getters.news(vuex语法糖)
        ...mapGetters(["news"])
    },
    created() {
        // 获取getters中news数据
        console.log(this.news);
    }
}

.

3.store文件目录结构

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    strict: debug, // 当debug=true时开启严格模式(性能有损耗)
    plugins: debug ? [createLogger()] : []
})

state.js:

const state = {
    news: {}
}
export default state

mutations.js:

const mutations = {
    SET_NEWS(state, val) {
        state.news= val
    }
}
export default mutations

actions.js:

//异步处理
const actions = {
    M_NEWS({ commit }, val) {
        commit('SET_NEWS', val);  // commit mutations修改
    }
}

export default actions

4.使用store

在main.js中引用

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

Vue.config.productionTip = false

import axios from 'axios'
Vue.prototype.axios=axios;

import store from './store/index'

new Vue({
  el: '#app',
  router:router,
  store:store,
  components: { App},
  template: '<App/>'
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343