Vuex 学习笔记

最新推荐文章于 2024-09-16 08:47:17 发布
最新推荐文章于 2024-09-16 08:47:17 发布
阅读量69 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/rogerwu/p/7606156.html
版权

Vuex 是什么？

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。由于SPA应用的模块化，每个组件都有它各自的数据（state）、视图（view）和方法（actions），当项目内容越来越多时，每个组件中的状态就变得很难管理。Vuex 就是采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

 

1、单个组件中的状态

看一下官网提供的计数示例：

<template>
  <div>
      <button class="btn btn-success" @click="increment">increment</button>
      view: {{count}}
  </div>
</template>

<script>
    export default {
        // state
        data () {
            return {
                count: 0
            }
        },
        // actions
        methods: {
            increment () {
                this.count++
            }
        }
    }
</script>

运行结果：

从效果图中可以直观的看到，每点击一次按钮触发添加事件（actions），数据count（state）就会发生改变，然后映射到视图界面（view）中。

下图可以表示 “ 单项数据流 ” 理念的极简示意：

这个状态管理应用包含以下几个部分：

• state：驱动应用的数据源

• view：以声明方式将 state 映射到视图

• actions：响应在 view 上的用户输入导致的状态变化

 

2、多个组件中的状态

当我们的应用遇到 多个组件共享状态 时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态

• 来自不同视图的行为需要变更同一状态

 

同样是计数器，我们现在更换一种场景，两个相同的组件A和B，共享一个数据count，并且都有一个方法可以操作这个count（是不是跟上面提到的多组件共享状态描述的一样呢）

// 组件A
<template>
  <div>
    {{ $store.state.count }}
    <button @click="increment">组件A</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment () {
        this.$store.commit('increment')
      }
    }
  }
</script>

//组件B
<template>
  <div>
    {{ $store.state.count }}
    <button @click="increment">组件B</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment () {
        this.$store.commit('increment')
      }
    }
  }
</script>

运行效果：

从图中可以看到，“组件A” 和 “组件B” 两个按钮 会同时改变两个 count 的数据，因为数据源 count 和 方法increment 都是全局的。如下图所示，我们把 全局数据源 state，改变数据源的方法 mutations 和 异步操作方法 actions 提取出来放到 store 中，实现全局数据状态单独管理的功能

安装 

1、使用 npm 安装并保存到 package.json 中

npm install vuex --save

package.json

"dependencies": {
    ...,
    ...,
    ...,
    "vuex": "^2.4.1"
  },

 

2、配置

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//创建Store实例
const store = new Vuex.Store({
  // 存储状态值
  state: {
    ...
  },
  // 状态值的改变方法,操作状态值
  // 提交mutations是更改Vuex状态的唯一方法
  mutations: {
    ...
  },
  // 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
  getters: {
    ...
  },
  actions: { 
    ...
  }
})
// 要改变状态值只能通过提交mutations来完成

/* eslint-disable no-new */
const app = new Vue({
    router,
    i18n,
    // 将 store 实例注入到根组件下的所有子组件中，子组件通过 this.$store 来访问store
    store,
    ...App
})

app.$mount('#app')

看一下官网提供的例子：

<template>
  <div>
        <p>{{ count }}</p>
        <p>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
        </p>
  </div>
</template>

<script>
    export default {
        computed: {
            count () {
                // 通过 store.state 来获取状态对象
                return this.$store.state.count
            }
        },
        methods: {
            increment () {
                // 通过 store.commit 方法触发状态变更
                this.$store.commit('increment')
            },
            decrement () {
                this.$store.commit('decrement')
            }
        }
    }
</script>
// 创建 Store 实例
const store = new Vuex.Store({
    // 存储状态值
    state: {
        count: 0
    },
    // 状态值的改变方法，操作状态值
    // 提交 mutations 是更改Vuex状态的唯一方法
    mutations: {
        increment: state => state.count++,
        decrement: state => state.count--
    }
})

运行效果：

 

核心概念

1、State

state 就是全局的状态（数据源），从前面的例子中看到我们可以按如下方式获取 Vuex 的state 状态

// html 中
{{ $store.state.count }}

// js 中
this.$store.state.count

 

2、Getter

getter 可以认为是 store 的计算属性，跟计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会重新计算

如下官网提供的案例：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，然而这两种方法都不是很理想，最佳方式当然是使用 getter 了

我们尝试使用下getter

（1）、定义 getter

const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        formatMoney: state => {
            return '￥'+state.count.toFixed(2)+'元'
        }
    },
    mutations: {
        increment: state => state.count++
    }
})

（2）、在组件中引用 getter

export default {
    methods: {
      increment () {
        this.$store.commit('increment')
        // 这里为了更清楚的看到计算后的值
        let aaa = document.getElementById('aaa')
        let p = document.createElement('p')
        p.innerHTML = this.$store.getters.formatMoney
        aaa.appendChild(p)
      }
    },
    computed: {
        formatMoney() {
            return this.$store.getters.formatMoney
        }
    }
  }

效果：

3、Mutation

更改 Vuex 的 store 中的状态的唯一方法就是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型（type）和一个 回调函数（handler），这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法

store.commit('increment')

 

（1）、提交载荷（Payload）

载荷（payload）就是说 可以向 store.commit 传入额外的参数

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的mutation会更易读：

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

 

4、Action

Vuex 中一条重要的原则就是 mutation 必须是同步函数， action 类似于 mutation，不同之处在于：

• Action 提交的是 mutation，而不是直接变更状态

• Action 可以包含任意异步操作

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    },
    // 异步
    incrementAsync (context) {
      // 延时1秒
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  } 
})

Action 函数接受一个与 store 实例具有相同方法和属性的context对象，因此，可以有以下调用方法

• context.commit  提交一个 mutation

• context.state  获取 state

• context.getters   获取 getters

不同于 mutation 使用 commit 方法，action 使用 dispatch 方法

store.dispatch('increment')

Actions 同样支持 载荷方式 和 对象方式 进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

 

5、Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store 对象就有可能变得非常臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成 模块（module），每个模块拥有自己的 state、mutation、getter、action，甚至是嵌套子模块 --- 从上至下进行同样方式的分割

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

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

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

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

 

关于项目结构，我们可以看看官网提供的示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

官网同时也提供了一个 购物车 示例：

app.js 文件如下：

import 'babel-polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import store from './store'
import { currency } from './currency'

Vue.filter('currency', currency)

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

index.js 文件如下：

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'

Vue.use(Vuex)

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

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

getters.js 文件如下：

export const cartProducts = state => {
  return state.cart.added.map(({ id, quantity }) => {
    const product = state.products.all.find(p => p.id === id)
    return {
      title: product.title,
      price: product.price,
      quantity
    }
  })
}

actions.js 文件如下：

import * as types from './mutation-types'

export const addToCart = ({ commit }, product) => {
  if (product.inventory > 0) {
    commit(types.ADD_TO_CART, {
      id: product.id
    })
  }
}

mutation-type.js 文件如下：

export const ADD_TO_CART = 'ADD_TO_CART'
export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'

cart.js 文件如下：

import shop from '../../api/shop'
import * as types from '../mutation-types'

// initial state
// shape: [{ id, quantity }]
const state = {
  added: [],
  checkoutStatus: null
}

// getters
const getters = {
  checkoutStatus: state => state.checkoutStatus
}

// actions
const actions = {
  checkout ({ commit, state }, products) {
    const savedCartItems = [...state.added]
    commit(types.CHECKOUT_REQUEST)
    shop.buyProducts(
      products,
      () => commit(types.CHECKOUT_SUCCESS),
      () => commit(types.CHECKOUT_FAILURE, { savedCartItems })
    )
  }
}

// mutations
const mutations = {
  [types.ADD_TO_CART] (state, { id }) {
    state.lastCheckout = null
    const record = state.added.find(p => p.id === id)
    if (!record) {
      state.added.push({
        id,
        quantity: 1
      })
    } else {
      record.quantity++
    }
  },

  [types.CHECKOUT_REQUEST] (state) {
    // clear cart
    state.added = []
    state.checkoutStatus = null
  },

  [types.CHECKOUT_SUCCESS] (state) {
    state.checkoutStatus = 'successful'
  },

  [types.CHECKOUT_FAILURE] (state, { savedCartItems }) {
    // rollback to the cart saved before sending the request
    state.added = savedCartItems
    state.checkoutStatus = 'failed'
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

products.js 文件如下：

import shop from '../../api/shop'
import * as types from '../mutation-types'

// initial state
const state = {
  all: []
}

// getters
const getters = {
  allProducts: state => state.all
}

// actions
const actions = {
  getAllProducts ({ commit }) {
    shop.getProducts(products => {
      commit(types.RECEIVE_PRODUCTS, { products })
    })
  }
}

// mutations
const mutations = {
  [types.RECEIVE_PRODUCTS] (state, { products }) {
    state.all = products
  },

  [types.ADD_TO_CART] (state, { id }) {
    state.all.find(p => p.id === id).inventory--
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

购物车运行效果：

转载于:https://www.cnblogs.com/rogerwu/p/7606156.html

weixin_33730836
关注
vue基础-第三章
码化疼
10-19 994
组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素，封装可重用的代 组件注册 全局注册 Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 组件基础用 <div id="example"> <!-- 2、 组件使用 组件名...
vuex学习笔记
小旻
03-28 118
1.Vuex概述 Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享 组件之间数据共享方式-只适合小范围的数据共享 父传子：v-bind属性绑定 子传父：v-on事件绑定 兄弟组件之间数据传递：EventBus $on：接收数据的组件 $emit：发送数据的组件 2.vuex核心概念 state state提供唯一的公共数据源，所有的共享数据都需要统一存放到Store的State中进行存储 组件访问State中数据的方式1：...
data中的数据如何在innerhtml中调用_Vuex中调用state数据
weixin_33552698的博客
01-30 322
/src/store/index.js文件的所需内容state:{ //state中存在的数据 num:0, age:19, msg:"jiajia", },mutations:{ setNum(state,val){ state.num=val; }},第一种：直接访问 姓名：{{$store.s...
vuex（用了vue就上了一条不归路的贼船）
weixin_30940783的博客
06-27 88
一、Vuex是干什么用的？ 它是用于对复杂应用进行状态管理用的（官方说法是它是一种状态管理模式）。 “杀鸡不用宰牛刀”。对于简单的项目，根本用不着Vuex这把“宰牛刀”。那简单的项目用什么呢？用Vue.js官方提供的事件总线就可以了。 二、我们import进来的Vuex对象都包含些什么呢？ 我们使用Vuex的时候怎么用呢？通常都是这样： import Vue from 'vue'; ...
Vue2.5+ Typescript 引入全面指南 - Vuex篇
weixin_34389926的博客
11-05 478
Vue2.5+ Typescript 引入全面指南 - Vuex篇 系列目录： Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescript 引入全面指南 - Vuex篇 前言 Vuex 正是我下决心引入Typescript的核心痛点。与 vuex 相关的代码中，到处充斥着此般写法： 再加上vuex的 d...
Vue 之 Vuex（5）actions 的使用
热门推荐
惟忆
06-07 4万+
Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 mutation 是同步事务 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知
Vue CLI、Vue Router、Vuex学习笔记
weixin_43571751的博客
04-19 360
Vue CLI 介绍 CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。 Vue CLI是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。 前提 Vue.js官方脚手架工具就使用了webpack模板对所有的资源会压缩等优化操作，它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变...
Vue全家桶--Vuex学习笔记
qq_37396088的博客
01-31 337
vuex学习 终于学完了vue vue-loader vuex三件套！vuex学习完了记录笔记如下，是看的b站上的vue入门到实战和对比着官方文档学习的 vuex安装 npm install -S vuex store.js import Vuex from ‘vuex’ import Vue from ‘vue’ Vue.use(Vuex) const store = new Vues.store({ state:{}, mutations:{}, actions:{} }) export default
Gson转换
09-13 298
gson格式转换.create());@Overridetry {
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 382
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
C++与QML的数据交互
qq_50679120的博客
09-11 518
这里没什么好说的，在C++中组合好json后，通过信号发送到qml中，qml中是可以解析json的。通过Q_PROPERTY属性，可以轻松地在QML中读取和修改数据，并将其更新到C++中，先创建一个类。在QML接收，直接通过data.can_id这样的形式去访问结构体中的元素。这两个也没什么好说的，在C++中直接发送信号就好了，在C++中声明并注册一个结构体。然后发送信号到QML中。
sqlalchemy JSON 字段写入时中文序列化问题
llc的博客
09-12 352
_table_args__ = ({"comment": "表名称"})...extra = Column(JSON, comment="其他属性")...
jackson 中常用注解说明
Gemini1995的博客
09-11 599
Jackson 是一个流行的 JSON 序列化和反序列化库，提供了丰富的注解来控制对象与 JSON 之间的转换过程。
使用 uni-app 开发微信小程序的详细指南
最新发布
2301_79685859的博客
09-16 489
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
EP12 分类列表元素点击跳转
歌舞阿瓜的博客
09-13 1105
文件路径： E:/homework/uniappv3tswallpaper/pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom"
Jackson注解屏蔽某些字段读取权限
fxtxz2的专栏
09-12 252
Spring引入Jackson json序列化库真好用。
项目实现：云备份②（文件操作、Json等工具类的实现）
weixin_57663528的博客
09-14 543
实现了云备份文件所需的工具类：文件操作、Json序列化和反序列化类实现
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值