优秀企业网站欣赏店名设计,网站建设丿金手指下拉,网页设计实训报告实训小结,网站建设与维护采访稿Vuex 是什么#xff1f; Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。由于SPA应用的模块化#xff0c;每个组件都有它各自的数据#xff08;state#xff09;、视图#xff08;view#xff09;和方法#xff08;actions#xff09;#xff0c;当项目内容越来越…Vuex 是什么 Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。由于SPA应用的模块化每个组件都有它各自的数据state、视图view和方法actions当项目内容越来越多时每个组件中的状态就变得很难管理。Vuex 就是采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。 1、单个组件中的状态 看一下官网提供的计数示例 templatedivbutton classbtn btn-success clickincrementincrement/buttonview: {{count}}/div
/templatescriptexport default {// statedata () {return {count: 0}},// actionsmethods: {increment () {this.count}}}
/script 运行结果 从效果图中可以直观的看到每点击一次按钮触发添加事件actions数据countstate就会发生改变然后映射到视图界面view中。 下图可以表示 “ 单项数据流 ” 理念的极简示意 这个状态管理应用包含以下几个部分 • state驱动应用的数据源 • view以声明方式将 state 映射到视图 • actions响应在 view 上的用户输入导致的状态变化 2、多个组件中的状态 当我们的应用遇到 多个组件共享状态 时单向数据流的简洁性很容易被破坏 • 多个视图依赖于同一状态 • 来自不同视图的行为需要变更同一状态 同样是计数器我们现在更换一种场景两个相同的组件A和B共享一个数据count并且都有一个方法可以操作这个count是不是跟上面提到的多组件共享状态描述的一样呢 // 组件A
templatediv{{ $store.state.count }}button clickincrement组件A/button/div
/templatescriptexport default {methods: {increment () {this.$store.commit(increment)}}}
/script//组件B
templatediv{{ $store.state.count }}button clickincrement组件B/button/div
/templatescriptexport 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 vuexVue.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) 看一下官网提供的例子 templatedivp{{ count }}/ppbutton clickincrement/buttonbutton clickdecrement-/button/p/div
/templatescriptexport 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.formatMoneyaaa.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 ./currencyVue.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/loggerVue.use(Vuex)const debug process.env.NODE_ENV ! productionexport 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-typesexport 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 nullconst record state.added.find(p p.id id)if (!record) {state.added.push({id,quantity: 1})} else {record.quantity}},[types.CHECKOUT_REQUEST] (state) {// clear cartstate.added []state.checkoutStatus null},[types.CHECKOUT_SUCCESS] (state) {state.checkoutStatus successful},[types.CHECKOUT_FAILURE] (state, { savedCartItems }) {// rollback to the cart saved before sending the requeststate.added savedCartItemsstate.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
