vuex/store使用

示例代码

main.js中添加代码

import store from "./store" //导入store

new Vue({

el: ‘#app‘,

router,

store, //添加一个store

components: {App},

template: ‘<App/>‘

})

store文件夹中创建index.js

分为四级操作: state; mutations; action; getters

import Vue from "vue"

import VueX from "vuex"

Vue.use(VueX)

export default new VueX.Store({

state: {

order: {counter: 1, downmenu: 1, radios: 1, },

totalPrice: 0,

mutations: {

updateOrder(state, data) { //data = key , value

if (data.counter != undefined) {state.order.counter = data.counter; }

if (data.downmenu != undefined) {state.order.downmenu = data.downmenu; }

if (data.radios != undefined) {state.order.radios = data.radios; }

updatePrice(state, price) {state.totalPrice = price; }

actions: {

updateOrder(context, data) {context.commit("updateOrder", data); },

updatePrice(context, price) {context.commit("updatePrice", price); }

getters: {

getOrder(state) {return state.order ? state.order : {}},

getTotalPrice(state) {return state.totalPrice >= 0 ? "￥" + state.totalPrice : 0}

}

})

设置传值

this.$store.dispatch("updateOrder", {"counter": this.number});

获取store值

this.$store.getters.getTotalPrice;

原文地址：https://www.cnblogs.com/rangewr/p/10710929.html

时间： 2024-10-19 22:31:02

vuex/store使用的相关文章

关于 vuex 报错 Do not mutate vuex store state outside mutation handlers.

10 :问题描述在使用vuex 时,有时候我们在mutation中定义好方法,在页面或组件提交时有可能经常会遇到这个错误:---->>Do not mutate vuex store state outside mutation handlers. 9. 原因: The reason is that arrays are stored as references in Javascript and payload.items is likely to be changed outside

vue学习笔记（三）——vuex—store配置

可以将不同视图的仓库放到不同的store中. --store index.js foo.js bar.js --views Foo.vue Bar.vue App.vue main.js 1.配置单个store的信息 foo.js export default{ namespaced: true, //具名引用时使用 state: { //state状态管理(通过store.state.name访问) name: 'waite zhou', age: 25 }, getters: { // st

[Vuex] Create a Vuex Store using TypeScript

A Vuex store centralizes the state of your app, making it easy to reason about your state flow. In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based component by using the @State decorator from Vuex C

VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers

数组错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错正确的写法:let listDate= state.playList.slice(); /*不能直接操作state里面的属性,但是可以创建一个副本*/ 对象错误的写法:let listData= state.playList; // 对象深拷贝,VUEX就报错正确的写法:let listDate= Object.assign({}, state.playList); /*不能直接操

修改 vuex $store.state 里取出的数据不响应

一定要先拷贝 let { showLabel, actualValue } = this.record; let show = this.rowData[showLabel]; let actual = this.rowData[actualValue]; const { formGroup } = this.$store.state.right; const { dispatch } = this.$store; let group = _.cloneDeep(formGroup) // 这一

vuex应用实例-this.$store.commit()触发

新建文件夹store,store下: action.js const actions = {} export default actions; getter.js const getters = {} export default getters; mutation-types.js export const publicSetEvent = 'publicSetEvent'; mutations.js import {publicSetEvent} from './mutation-types

vuex里面的store架构

将store文件夹分为四个文件夹,分别是actions,getters,mutations,state. action:和mutatation功能是类似的,都是修改state里面的数据,区别是action用于异步修改 getter:后端传过来的数据,如果需要做一些处理就在getter里面写. mutations:用于处理同步数据修改 state:存放后端传过来的原生数据. 父组件通过调用action对store里面数据进行了处理,他的子组件只要调用getter就可以获取到父组件处理后的数据如下

vuex创建store并用computed获取数据

vuex中的store是一个状态管理器,用于分发数据.相当于父组件数据传递给子组件. 1.安装vuex npm i vuex --save 2.在src目录中创建store文件夹,里面创建store.js (1)store.js里引入vue和Vuex, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) (2)创建并导出store对象 export const store = new Vuex.Store({ }) (3)在st

使用vuex报错“__WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor”

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.store({ state:{ num:"我是vuex1" } }); export default store; 控制台显示报错 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor (是因为尝试将不是