十六、【VUE-CLI】Vuex（store）

已于 2022-08-07 10:52:24 修改
阅读量844 收藏 5
点赞数 3
分类专栏： Vue 简单回顾
于 2022-08-07 10:37:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_30769437/article/details/126202906
版权

vue.js vue-cli vuex store

十六、Vuex

1、全局事件总线弊端

全局事件总线，组件少的时候用着还可，组件一多就会乱，那有没有一种把数据抽出来，单独存放在一个对象上，这个对象再对外提供各种API操作这个数据呢？这样就不存在绑定泛滥、命名冲突、传输混乱的问题了！

Vuex 应运而生！

2、上才艺！计数器案例（纯Vue写法）

1、效果图

在这里插入图片描述

2、项目结构

在这里插入图片描述

3、CODE

1、App.vue
<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
	}
</script>
2、Count.vue
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<select v-model.number="n">
			<option v-for="(number,index) of 5" :key="index" :value="number">{{number}}</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementEven">当前求和为偶数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
				sum:0 //当前的和
			}
		},
		methods: {
			increment(){
				this.sum += this.n
			},
			decrement(){
				this.sum -= this.n
			},
			incrementEven(){
				if(this.sum && this.sum % 2 == 0){
					this.sum += this.n
				}
			},
			incrementWait(){
				setTimeout(()=>{
					this.sum += this.n
				},500)
			},
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

3、上菜！Vuex原理图

在这里插入图片描述

4、冷静分析

在这里插入图片描述

5、安装上牌！

1、安装

需要注意的是：

Vue2只能安装 Vuex.3 版本： npm i vuex@3

Vue3只能安装 Vuex.4 版本： npm i vuex

2、创建Vuex文件结构

在这里插入图片描述

3、CODE

1、index.js
// 该文件用于创建VueX中最为核心的store

// 引入Vuex
import Vuex from 'vuex'

// 准备Actions：用于响应组件中的动作
const actions = {}

// 准备Mutations：用于操作数据（state）
const mutations = {}

// 准备state：用于存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
2、上牌(main.js)
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
// 引入Vuex
import Vuex from 'vuex'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false

// 使用Vuex插件
Vue.use(Vuex)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

4、Result

在这里插入图片描述

5、分析一波

很简单，就是在创建 store 前调用 Vue.use(Vuex) 呗！

值得一提的是扫描文件的时候所有 import会向上提升，运行的时候会先把 import 跑完

So，单纯的把 Vue.use(Vuex) 放到 import store from ‘./store’ 上面解决不了问题！

6、CorrectCODE

1、index.js
// 该文件用于创建 Vuex 中最为核心的 store

//引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'

// 使用Vuex插件
Vue.use(Vuex)

// 准备Actions：用于响应组件中的动作
const actions = {}

// 准备Mutations：用于操作数据（state）
const mutations = {}

// 准备state：用于存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
2、上牌(main.js)
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

7、NewResult

在这里插入图片描述

6、安排！计数器升级Vuex版本

1、Count.vue
<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option v-for="(number,index) of 5" :key="index" :value="number">{{number}}</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementEven">当前求和为偶数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		mounted(){
			console.log(this)
		},
		methods: {
			increment(){
                // 可以直接commit
				this.$store.commit('ADD', this.n)
			},
			decrement(){
                // 可以直接commit
				this.$store.commit('LESS', this.n)
			},
			incrementEven(){
				if(this.$store.state.sum && this.$store.state.sum % 2 == 0){
					this.$store.dispatch('add', this.n)
				}
			},
			incrementWait(){
				setTimeout(()=>{
					this.$store.dispatch('add', this.n)
				},500)
			},
		},
	}
</script>
2、index.js
// 该文件用于创建VueX中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'

// 使用Vuex插件
Vue.use(Vuex)

// 准备Actions：用于响应组件中的动作
const actions = {
    add(context, value){
        console.log('Actions.add 被调用了！\n上下文参数为：', context, '\n值参数为：', value)
        context.commit('ADD', value)
    },
    less(context, value){
        console.log('Actions.less 被调用了！\n上下文参数为：', context, '\n值参数为：', value)
        context.commit('LESS', value)
    }
}

// 准备Mutations：用于操作数据（state）
const mutations = {
    ADD(state, value){
        console.log('Mutations.ADD 被调用了！\n状态参数为：', state, '\n值参数为：', value)
        state.sum += value
    },
    LESS(state, value){
        console.log('Mutations.LESS 被调用了！\n状态参数为：', state, '\n值参数为：', value)
        state.sum -= value
    }
}

// 准备state：用于存储数据
const state = {
    sum: 0
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
3、Result

在这里插入图片描述

7、升级！getters

需求：展示一个求和放大100倍的数据

我想对 store的某个属性进行一系列运算获得一个结果展示到页面上，并且多个组件都要用到，这样既不方便直接在组件里写方法也不方便写计算属性，就只能挂 Vuex 身上，嗯，没错就是 getters 了！

1、index.js

// 准备getters：用于对state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 100
    }
}

// 创建并暴露store
export default new Vuex.Store({
    // ...
    getters
})

2、Count.vue

<h1>和放大100倍：{{$store.getters.bigSum}}</h1>

3、Result

在这里插入图片描述

8、新需求！mapState 和 mapGetters

增加一些属性!

但是获取很多的时候写法就很繁琐，有没有一种方法可以直接获取

而不用每次都写 $store.state.xxx 和 $store.getters.xxx

当然有了！ mapState 和 mapGetters

1、index.js

// 准备state：用于存储数据
const state = {
    sum: 0,
    name: 'Mr.Wang',
    age: 24
}

2、Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h1>和放大100倍：{{$store.getters.bigSum}}</h1>
		<h1>我是迷人的{{$store.state.name}}，今年{{$store.state.age}}岁</h1>
        <!-- ... -->
	</div>
</template>

3、Result

在这里插入图片描述

4、优化！计算属性

Count.vue

<template>
	<div>
		<h1>当前求和为：{{he}}</h1>
		<h1>和放大100倍：{{daHe}}</h1>
		<h1>我是迷人的{{myName}}，今年{{myAge}}岁</h1>
        <!-- ... -->
	</div>
</template>
<script>
	export default {
        // ...
        computed:{
            he(){
                return this.$store.state.sum
            },
            myName(){
                return this.$store.state.name
            },
            myAge(){
                return this.$store.state.age
            },
            daHe(){
                return this.$store.getters.bigSum
            }
        },
        // ...
    }
</script>

5、优化！mapState

1、CODE：Count.vue
<script>
	// 引入 VueX 的 state映射，可以帮你生成state属性的计算属性
	import {mapState} from 'vuex'
	export default {
		name:'Count',
        computed:{
            he(){
                return this.$store.state.sum
            },
            myName(){
                return this.$store.state.name
            },
            myAge(){
                return this.$store.state.age
            },
            daHe(){
                return this.$store.getters.bigSum
            }
        },
		mounted(){
			const x = mapState({
				he: 'sum',
				myName: 'name',
				myAge: 'age'
			})
			console.log(x)
		}
        // ...
	}
</script>
2、Result

在这里插入图片描述

3、mapState生成的计算属性放到computed里
computed:{
    // 手写 state 属性时代过去啦！！！
    /* he(){
    	return this.$store.state.sum
    },
    myName(){
    	return this.$store.state.name
    },
    myAge(){
    	return this.$store.state.age
    }, */
    
    // 借助mapState生成计算属性，从state中读取数据（对象写法）
    ...mapState({ he: 'sum', myName: 'name', myAge: 'age' }),
        
	// 借助mapState生成计算属性，从state中读取数据（数组写法）
	// 数组写法写法必须满足 mapState({ sum: 'sum', name: 'name', age: 'age' })
	//...mapState([ 'sum', 'name', 'age' ]),
    daHe(){
        return this.$store.getters.bigSum
    }
}
4、mapGetters生成的计算属性放到computed里
<script>
	// 引入 VueX 的 state映射，可以帮你生成state属性的计算属性
	import {mapState, mapGetters} from 'vuex'
	export default {
		name:'Count',
        computed:{
            ...mapState({ he: 'sum', myName: 'name', myAge: 'age' }),
           	// mapGetters同理（对象写法）
            ...mapGetters({daHe: 'bigSum'})
            // mapGetters同理（数组写法） 必须满足mapGetters({bigSum: 'bigSum'})
            // ...mapGetters(['bigSum'])
        }
        // ...
	}
</script>

9、同理升级Actions和Mutations！mapActions 和 mapMutations

1、代码变更

1、Count.vue
methods: {
    increment(){
        this.$store.commit('ADD', this.n)
    },
    decrement(){
        this.$store.commit('LESS', this.n)
    },
    incrementEven(){
        this.$store.dispatch('evenAdd', this.n)
    },
    incrementWait(){
        this.$store.dispatch('waitAdd', this.n)
    },
}
2、index.js
// 准备Actions：用于响应组件中的动作
const actions = {
    add(context, value){
        context.commit('ADD', value)
    },
    less(context, value){
        context.commit('LESS', value)
    },
    // 新+2
    evenAdd(context, value){
        if(context.state.sum && context.state.sum % 2 == 0){
            context.dispatch('add', value)
        }
    },
    waitAdd(context, value){
        setTimeout(()=>{
            context.dispatch('add', value)
        },500)
    }
}

2、mapActions 和 mapMutations

1、CODE：Count.vue
<script>
	// 引入 VueX 的 state映射，可以帮你生成state属性的计算属性
	import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
	export default {
		name:'Count',
        computed:{
			...mapState([ 'sum', 'name', 'age' ]),
			...mapGetters(['bigSum'])
        },
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			/* increment(){
				this.$store.commit('ADD', this.n)
			},
			decrement(){
				this.$store.commit('LESS', this.n)
			}, */
            
			// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment: 'ADD', decrement: 'LESS'}),
			// mapMutations数组写法（方法名也变成 ADD 和 LESS 了！）
			// ...mapMutations(['ADD', 'LESS']),

			/* incrementEven(){
				this.$store.dispatch('evenAdd', this.n)
			},
			incrementWait(){
				this.$store.dispatch('waitAdd', this.n)
			} */
            
			// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions({incrementEven: 'evenAdd', incrementWait: 'waitAdd'})
			// mapActions数组写法（方法名也变成 evenAdd 和 waitAdd 了！）
			// ...mapActions(['evenAdd', 'waitAdd'])
		},
	}
</script>
2、Result

在这里插入图片描述

3、CorrectCODE：Count.vue
<template>
	<div>
        <!-- ... -->
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementEven(n)">当前求和为偶数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	// 引入 VueX 的 state映射，可以帮你生成state属性的计算属性
	import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
	export default {
		// ...
		methods: {
			// mapMutations
			...mapMutations({increment: 'ADD', decrement: 'LESS'}),
			// mapActions
			...mapActions({incrementEven: 'evenAdd', incrementWait: 'waitAdd'})
		},
	}
</script>
4、CorrectResult

在这里插入图片描述

10、高级开发！Vuex模块化编码

核心理念就是 A 干 A 的活， B 干 B的活，你俩别勾搭在一起瞎干活

1、store/index.js

// 该文件用于创建VueX中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入VueX
import Vuex from 'vuex'

// 使用Vuex插件
Vue.use(Vuex)

// A的活
const a = {
    actions: {...},
    mutations: {...},
    getters: {...},
    state: {...}
}

// B的活
const b = {
    actions: {...},
    mutations: {...},
    getters: {...},
    state: {...}
}

// 创建并暴露store
export default new Vuex.Store({
	modules: { // 别问！就这么写，甲鱼的臀部，规定！
		a, // 此处对象简写了，你正常写也没人拦着你啊
        b
	}
})

2、vc里如何获取属性和自动生成

1、先看看state变成啥样了

在这里插入图片描述

很明显原来 $store.state.sum 得写成 $store.state.a.sum 了

2、mapState第一种取法
<template>
	<div>
		<!-- sum展示直接取 -->
		<h1>当前求和为：{{$store.state.a.sum}}</h1>
		<!-- ... -->
		<h1>我是迷人的{{a.name}}，今年{{a.age}}岁</h1>
		<!-- ... -->
</template>

<script>
	import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
	export default {
		name:'Count',
        computed:{
            // mapState此时就不能直接取了
			// ...mapState({sum: 'sum', name: 'name', age: 'age'}),
			// ...mapState([ 'sum', 'name', 'age' ]),
            
            // mapState得换成下面的写法
            // 对象写法
			// ...mapState({a: 'a', b: 'b'}),
            // 数组写法
            ...mapState([ 'a', 'b' ]),
            
            // ...
        },
        // ...
	}
</script>
3、mapState第二种取法
1、首先index.js得改造，加一个 命名空间 namespaced 属性
// A的活
const a = {
    namespaced: true, // 选用，要使用第二种写法就必须开启此属性
    actions: {...},
    mutations: {...},
    getters: {...},
    state: {...}
}

如果不写就会报如下错误：

在这里插入图片描述

2、mapState第二种取法
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h1>和放大100倍：{{bigSum}}</h1>
		<h1>我是迷人的{{name}}，今年{{age}}岁</h1>
		<!-- ... -->
</template>

<script>
	import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
	export default {
		name:'Count',
        computed:{
            // 从a里只取a的属性，这样用的时候就不用再写'a.'了，对象写法
			// ...mapState('a', {sum: 'sum', name: 'name', age: 'age'}),
            // 数组写法
            ...mapState('a', ['sum', 'name', 'age']),
        },
        // ...
	}
</script>
4、mapGetters
// 直接取写法
<p>调用全局的getter：{{this.$store.getters.theirname}}</p>
<p>调用模块的A的getter:{{this.$store.getters['a/bigSum']}}</p>

// 自动生成时对象写法也和mapState略有不同
...mapGetters({bigSum: 'a/bigSum'}),

// 自动生成时数组写法和mapState相同
...mapGetters('a', ['bigSum']), // namespaced: true

这里肯定就有小伙伴要问了，为什么不同呀？用脚指头想都知道肯定是 key给的不一样了呗！

在这里插入图片描述

看到这里机智的小伙伴就又要问了，为什么不像 state 一样写呢？难道是因为爱情吗？当然不是！肯定是不推荐你直接调用呗！

5、mapMutations 和 mapActions
// 直接调用
this.$store.dispatch('a/add', data)
this.$store.commit('a/ADD', data)

// mapMutations(对象写法)
// ...mapMutations({increment: 'ADD', decrement: 'LESS'}), // 原单写法
...mapMutations('a', {increment: 'ADD', decrement: 'LESS'}), // namespaced: true
// mapMutations数组写法（同理，但是基本不会有人用）
// ...mapMutations(['ADD', 'LESS']), // 原单写法
// ...mapMutations('a', ['ADD', 'LESS']),

// mapActions(对象写法)
// ...mapActions({incrementEven: 'evenAdd', incrementWait: 'waitAdd'})
...mapActions('a', {incrementEven: 'evenAdd', incrementWait: 'waitAdd'}), // namespaced: true
// mapActions数组写法（同理，但是基本不会有人用）
// ...mapActions(['evenAdd', 'waitAdd']), // 原单写法
// ...mapActions('a', ['evenAdd', 'waitAdd']),

3、模块化的好处

可以分门别类，每个人的活单独写到一个 js 文件里，要么给你一个 store 文件夹是干嘛的，就是让你分门别类的！

11、Vuex总结

1.概念

​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

2.何时使用？

​ 多个组件需要共享数据时

3.搭建vuex环境

  1. 创建文件：src/store/index.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state
})

  2. 在main.js中创建vm时传入store配置项

    ......
//引入store
import store from './store'
......

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

4.基本使用

  1. 初始化数据、配置actions、配置mutations，操作文件store.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
   jia(context,value){
      // console.log('actions中的jia被调用了',miniStore,value)
      context.commit('JIA',value)
   },
}

const mutations = {
    //执行加
   JIA(state,value){
      // console.log('mutations中的JIA被调用了',state,value)
      state.sum += value
   }
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state,
})

  2. 组件中读取vuex中的数据：$store.state.sum

  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

  2. 在store.js中追加getters配置

    ......

const getters = {
   bigSum(state){
      return state.sum * 10
   }
}

//创建并暴露store
export default new Vuex.Store({
   ......
   getters
})

  3. 组件中读取数据：$store.getters.bigSum

6.四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性

    computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

    computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

  3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

7.模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确

  2. 修改store.js

    const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
vue-cli2使用store存储全局变量
qq_41940987的博客
10-14 797
1.引入store 安装引入vuex，在main.js里面： import store from ‘./store‘ //+++ new Vue({ el: ‘#app‘, router, store, //+++ components: { App }, template: ‘<App/>‘ }) 在store文件夹下创建index.js入口文件,添加下面内容： import Vue from ‘vue‘; import Vuex from ‘v...
vue 中 store的使用
热门推荐
妖尾攻城狮的博客
05-28 1万+
1. 在package.json查看是否已安装vuex，在store目录下 module下存放不同模块 方便区分 type.js 中存放类型常量 2. 在main中引入 test.js import types from "../types"; // 全局变量 const state = { count: 6 }; // 用来获取属性 const getters = { count(state) { return state.count; }, count
vue-cli vuex全局存储store.js
enhenglhm的博客
01-25 1086
代码仅供参考，不懂回来看看 import { createStore } from 'vuex' export default createStore({ state: { token: '', //用户身份 正常置空，为了能够进入 loginState: false, //登录状态，默认未登录false username: '',//账户名 loginToken:'' }, getters:{ loginState(state){ if(!stat
Vuex Store 基础用法：从 State 到 Actions
最新发布
Lthan7的博客
04-12 913
State: 驱动应用的单一状态源Mutations: 同步修改 State 的方法Actions: 处理异步操作并提交 Mutations// 示例：Store 初始化state: { /* 数据 */ },mutations: { /* 同步方法 */ },actions: { /* 异步方法 */ }})在组件中我们不能修改仓库里的属性值Mutations唯一修改 State 的入口：所有状态变更必须通过 mutations同步操作：只能包含同步代码，确保状态变更是可追踪的。
Vue - cli 使用 Vuex store 管理 变量，还有全局函数
duanaibing3017的博客
04-25 5115
npm install vuex -S在目录下新建一个文件夹，store --------------store   //目录-------modules      //放模块的-------action.js     //暂时空白-------index.js     //总的文件（主要的）-------mutation-type.js   //还没用到index.jsimport Vue f...
vuex的Store简单使用过程
eliodadada的博客
07-06 691
使用vue-cli命令行创建项目（项目名为murenziwei） 1 vue create murenziwei 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。 按下Enter，等da我现在只需要一个能运行的vue项目就行，命令执行完成后，文件夹会自动生成一个vue项目 按照上面图片红色框的命令来执行 1 2 3 .
深入理解基于vue-cli的vuex配置
08-29
深入理解基于vue-cli的vuex配置 基于vue-cli的vuex配置是Vue.js生态系统中的一個重要组件，vuex是vue的状态管理工具，可以帮助开发者更好地管理应用程序中的状态。下面是基于vue-cli的vuex配置的详细介绍： 一、...
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
08-29
* 在store.js文件中，使用`import Vue from 'vue'`和`import Vuex from 'vuex'`引入Vue和Vuex，然后使用`Vue.use(Vuex)`和`const store = new Vuex.Store({ state: { userName : 'ghostwu' }})`配置Vuex。...
vue-cli开发的商城源代码
01-18
Vue.js 的设计目标是使开发过程更加简单和高效，同时提供了丰富的生态系统，如Vuex（状态管理）、Vue Router（路由管理）和Vue CLI（项目脚手架）。 `vue-cli` 在这个项目中起到了基础架构的作用。它允许开发者通过...
vue-cli-plugin-feathers-vuex:搭建FeathersVuex样板并通过cli为@vuecli添加服务
05-09
vue-cli-plugin-feathers-vuex Vue Cli插件，用于初始化和添加服务。 对于v3.0.0 -vuex v3.0.0及后续v3.0.0 将Feathers-vuex自动集成到vue中 安装 如果您使用Vue cli，请在命令行中输入以下内容： vue add ...
在Vue-cli里应用Vuex的state和mutations方法
10-18
在Vue-cli中应用Vuex管理状态和提交mutation，首先需要了解几个核心概念，包括Vue-cli、Vuex、state以及mutations。 Vue-cli是Vue.js的官方脚手架工具，它可以帮助开发者快速搭建一个Vue.js的项目环境。它提供了...
请说出 Vue-cli 项目中 src 目录每个文件夹和文件的用法？
麦呢头冷的博客
11-07 4353
Vue-cli项目中 src 目录 1. assets文件夹是放静态资源 2. components 文件夹是放全局组件的 3. router 文件夹是定义路由相关的配置 4. store 文件夹是管理 vuex管理数据的位置 模块化开发 全局getters 5. views 视图所有页面 路由级别的组件 6. App.vue入口页面 根组件 7. main.js入口文件 加载组件 初始化等 扩展:vue-admin-template的目录 ├── build ...
vue-cli 构建的项目中集成vuex
zeroyulong的博客
04-09 475
vue-cli 构建的项目中不包含vuex，需开发者手动引入。步骤如下一、npm安装vuex，打开项目目录运行指令 npm install vuex --save二、创建vuex相关文件夹及文件在src文件夹下新建store文件夹后，在store文件夹下新建如下文件:index.js、mutations.js、actions.js、getters.js及rootState.js三、修改入口文件ma...
vuex 的使用
冲锋
05-03 809
参考官方文档 https://vuex.vuejs.org/zh-cn/ Vuex 是什么？ 官方是这么解释的： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态， 并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-tr...
vue-cli脚手架初始化项目各个文件夹用途
背心的博客
02-16 1786
node_modules文件夹：项目依赖文件夹 public文件夹：一般放置一些静态资源（图片）。值得注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。 src文件夹 assets文件夹：一般用于存放静态资源（放置多个组件共用的静态资源），值得注意，放在在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面。 components文件夹：...
vue项目中全局使用EventBus的方法，以及利弊分析
niuglar的博客
07-21 7415
EventBus是什么 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式，所以代码里需要有一个地方注册事件，有另外一个或多个地方订阅事件。 为什么要用EventBus vue组件之间的通信，常见的有父传子，子传父，或者兄弟组件间互传，涉及到跨页面时需要用到vuex或者缓存的方式传值。一般来说用vuex做状态管理是项目的首选，但有一些小型而且快
Vue项目实现动态路由和动态导航菜单栏
qq_42797527的博客
11-30 2069
用于前端存储数据，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。Vuex中的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，相应的组件也会得到更新。而全局对象的状态存储是静态的，无法自动更新组件中的状态。根据后端返回的用户的菜单地址进行处理拼装成路由格式，存储到vuex中，并添加到路由里面，若vuex中有用户路由数据，直接放行。2每次路由跳转会通过permission.js进行判断和加载，若vuex中无用户路由数据则请求后端，
Vue项目的详细目录结构解析 vue-cli
weixin_49827467的博客
02-15 2024
vue-cli 目录详解
Vuex Store全方位指南：从目录结构、模块化设计，到Modules、state、mutations、actions、getters核心概念最佳实践及全面测试策略
JINGWHALE
04-28 2165
本文全方位介绍了Vuex Store 安装，目录结构、模块化设计，Modules、state、mutations、actions、getters核心概念最佳实践，以及全面测试策略最佳实践与示例。Vuex Store是Vue.js框架的核心状态管理器，充当应用程序的中央数据存储，实现组件间状态的一致性和可追踪性。Vuex测试则至关重要，它不仅验证了状态管理逻辑的准确性，防止回归错误，还增强了代码的可维护性和团队协作效率，是提升应用健壮性和开发流程成熟度的基石。
vue-cli引入vuex
11-05
Vue CLI（Vue Create App）是一个用于快速搭建 Vue.js 项目的脚手架工具。要将 Vuex 引入到 Vue CLI 项目中，你需要按照以下步骤操作： 1. 安装Vuex：打开终端，进入你的项目目录，运行`npm install vuex --save` 或者 `yarn add vuex` 来安装Vuex库。 2. 创建store文件夹：在项目的`src`文件夹下创建一个名为`store`的新文件夹，这是Vuex store（状态管理模块）通常存放的位置。 3. 创建store.js文件：在`store`文件夹内，新建一个名为`index.js`（或者其他你喜欢的名字）的文件，这里会编写Vuex的状态和行动逻辑。 4. 配置store：在`store/index.js`中，首先导入Vuex库，然后创建一个新的store实例，并设置初始state。例如： ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 初始化状态 }, mutations: { // 更新状态的方法 }, actions: { // 触发异步操作的方法 }, getters: { // 计算属性 } }) ``` 5. 使用store：要在组件中访问和修改state，需要通过注入`store`实例。在你的组件选项（如`setup`函数）中，可以这样做： ```javascript import { useStore } from '@/store' const store = useStore() // 在组件内的方法里，可以通过store.state, store.commit等方法来操作state ``` 6. 全局注册store：如果你希望在所有组件中都能直接使用store，可以在`main.js`或其他合适的地方全局注册store： ```javascript import store from '@/store' // 然后在Vue实例上挂载store new Vue({ store, // ... }).$mount('#app') ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纯纯的小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值