Vue学习笔记 —— 第一章Vuex状态管理模式的State基础使用

前言

好久没写Vue项目了，刚好最近学习Vue中学到了Vuex的内容，今天带着大家来学习一下Vuex的State基础使用把！

Vuex

Vuex按官网原文介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我个人概括下来就是：
帮助我们开发Vue应用中对于一些没有父子组件关系的组件 可以使用Vuex进行参数管理 从而让每个Vue项目不局限于父子组件，增加了组件的灵活性！

项目示例

我们本章教学，我们先搭建基础环境，之后在创建4个测试用例文件作为代码讲解

基础搭建

我这里使用了Vue-Router 路由用于更快分类，感兴趣的同学可以去了解一下 ！非必须

main.js

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

// 导入VueX
// import Vuex from "vuex"

// Vue.use(Vuex)
import VueRouter from "vue-router"
// 声明 component
import CsdnTest from "./components/CsdnVuexTest.vue"
import CsdnTest2 from "./components/CsdnVuex2.vue"
import CsdnTest3 from "./components/CsdnVuex3.vue"
import CsdnTest4 from "./components/CsdnVuex4.vue"
Vue.use(VueRouter)
// 定义路由
let router = new VueRouter({
	routes: [
		{
			path: "/csdnTest",
			name: "csdnTest",
			component: CsdnTest
		},
		{
			path: "/csdnTest2",
			name: "csdnTest2",
			component: CsdnTest2
		},
		{
			path: "/csdnTest3",
			name: "csdnTest3",
			component: CsdnTest3
		},
		{
			path: "/csdnTest4",
			name: "csdnTest4",
			component: CsdnTest4
		}
	]
});

// 导入store.js
import store from '../public/js/store.js'

Vue.config.productionTip = false

new Vue({
	router,
	store,
	render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
	<!-- 路由模块 -->
	<div class="content">
		<!-- 定义路由 -->
		<router-link to="/csdnTest">CsdnTest</router-link>
		<router-link to="/csdnTest2">CsdnTest2</router-link>
		<router-link to="/csdnTest3">CsdnTest3</router-link>
		<router-link to="/csdnTest4">CsdnTest4</router-link>
		<router-view></router-view>
 	</div>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

创建一个store.js文件

// store JS
import Vue from 'vue'

import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

const state = {
	// 数量
	count: 1,
	username: "Administrator",
	password: "root"
}

// 定义初始化vuex
export default new Vuex.Store({
	state
})

CSDNTest

通过 this.$store.state.属性进行获取state数据

<template>
	<!-- csdn测试用例 -->
	<div class="content">
		<h1>CSDN测试用例使用Vue </h1>
		<!-- 控制区 -->
		<div class="main_controller">
			<h2>控制区</h2>
			<button @click="setCount()">设置count</button>
			<button @click="setPassword()">设置密码</button>
			<button @click="setUserName()">设置用户名</button>
		</div>
		<!-- 显示区 -->
		<div class="main_showData">
			<p v-text="getCount"></p>
			<p v-text="getUserName"></p>
			<p v-text="getPassword"></p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "CsdnTest",
		data(){
			return{
				count: 0, 
				username: "用户名",
				password: "密码"
			}
		},
		computed:{
			// 获取count
			getCount : function(){
				return this.$store.state.count;
			},
			
			// 获取用户名
			getUserName : function(){
				return this.$store.state.username;
			},
			
			// 获取密码
			getPassword : function(){
				return this.$store.state.password;
			}
		},
		methods:{
			// 设置count
			setCount : function(){
				// 设置数量
				this.$store.state.count = this.count;
			},
			// 设置用户名
			setUserName : function(){
				// 设置数量
				this.$store.state.username = this.username;
			},
			
			// 设置密码
			setPassword : function(){
				// 设置数量
				this.$store.state.password = this.password;
			}
		}
		
	}
</script>

<style>
</style>

CSDNTest2

通过 mapState 语法糖更优雅的方式完成！

<template>
	<!-- csdn测试用例 -->
	<div class="content">
		<h1>CSDN测试用例使用Vue </h1>
		<!-- 显示区 -->
		<div class="main_showData">
			<p v-text="demo"></p>
			<p v-text="countValue"></p>
			<p v-text="userNameValue"></p>
			<p v-text="passwordValue"></p>
		</div>
	</div>
</template>

<script>
	// 设置vuex
	import {mapState} from "vuex"
	
	export default {
		name: "CsdnTest2",
		data(){
			return{
				count: 0, 
				username: "用户名",
				password: "密码"
			}
		},
		computed: mapState({
			// 创建一个计算属性 参数为state中的msg
			demo: "msg",
			countValue: (state) => state.count,
			userNameValue: (state) => state.username,
			passwordValue: (state) => state.password
		})
		
	}
</script>

<style>
</style>

CSDNTest3

通过 mapState 语法糖更优雅的方式完成！

<template>
	<!-- csdn测试用例 -->
	<div class="content">
		<h1>CSDN测试用例使用Vue </h1>
		<!-- 显示区 -->
		<div class="main_showData">
			<p v-text="demo"></p>
			<p v-text="countValue"></p>
			<p v-text="userNameValue"></p>
			<p v-text="passwordValue"></p>
		</div>
	</div>
</template>

<script>
	// 设置vuex
	import {mapState} from "vuex"
	
	export default {
		name: "CsdnTest3",
		data(){
			return{
				count: 0, 
				username: "用户名",
				password: "密码",
				demo: "项目示例"
			}
		},
		// 使用对象拓展运算符 可以保留原组件的计算属性，同时存在于vuex的state数据
		computed: {
			getDemo: function(){
				return this.demo;
			},
			...mapState({
				countValue: (state) => state.count,
				userNameValue: (state) => state.username,
				passwordValue: (state) => state.password
			})
		}
		
	}
</script>

<style>
</style>

CSDNTest4

通过 mapState 语法糖更优雅的方式完成！

<template>
	<!-- csdn测试用例 -->
	<div class="content">
		<h1>CSDN测试用例使用Vue </h1>
		<!-- 显示区 -->
		<div class="main_showData">
			<p v-text="count"></p>
			<p v-text="username"></p>
			<p v-text="password"></p>
		</div>
	</div>
</template>

<script>
	// 设置vuex
	import {mapState} from "vuex"
	
	export default {
		name: "CsdnTest4",
		data(){
			return{
				
			}
		},
		// 使用对象拓展运算符 可以保留原组件的计算属性，同时存在于vuex的state数据
		computed: mapState(['count','password','username'])
	}
</script>

<style>
</style>

结束语

今天我们讲解了一下Vue学习笔记 —— 第一章Vuex状态管理模式的State基础使用

• 如果对你有帮助的话可以给我点赞收藏，十分感谢
• 致力做优、好、细、精学习笔记分享给大家
• 可以转载 需标明 出处 本文链接。
• 笔者一个开源项目：餐饮管理系统 希望大家可以点一下star哦

感谢你的观看。