官网：https://vuex.vuejs.org/zh/

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

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

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意：

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

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

如果你想要以交互式的方式学习Vuex，快来看看在Scrimba上的这门Vuex课程。

#什么情况下我应该使用 Vuex？

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

下面来一则实例

上文我们已经学习了如何通过vue从内部传递资料和从外部传递资料

下面我们使用vuex

还是在我们的项目工程下安装

npm install vuex --save

新建目录和文件

H:\vue\vue_webback\src\store\index.js


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {status:'线上',username:'Caps',
}
const getters = {}
const actions = {}
const mutations = {}
export default new Vuex.Store({state,getters,actions,mutations
})

H:\vue\vue_webback\src\components\ListVuex.vue

<template><div class="hello container mt-5"><div>状态:{{showStatus}}</div><div class="form-inline mb-3"><input type="text" class="form-contarol" v-model="username"><button class="btn btn-primary" @click="updateUsername">更新姓名</button></div><table class="table table-striped"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th><th>Username</th></tr></thead><tbody><tr v-for="(item,i) in listData" :class="{'bg-info':item.selected}"><th scope="row">{{i+1}}</th><td><img :src="item.picture.medium" alt=""></td><td>{{item.name.first}} {{item.name.last}}</td><td>{{item.email}}</td><td><button class="btn btn-outline-primary" @click="clickMe(item)">点我</button></td></tr></tbody></table></div>
</template><script>export default {name: 'HelloWorld',// props: ['status'],data() {return {msg: 'Welcome to Your Vue.js App',listData: [],username: 'Cap',vuexStatus:this.$store.state.status}},methods: {getData() {let vm = this;
// Make a request for a user with a given IDvm.axios.get('https://randomuser.me/api/?results=50').then(function (response) {vm.listData = response.data.results;// console.log(vm.listData);vm.listData.forEach(function (item) {vm.$set(item, 'selected', false);})}).catch(function (error) {// console.log(error);});},updateUsername() {this.$store.state.username=this.username;},clickMe(item) {console.log(item)item.selected = !item.selectedconsole.log(item.selected)}},mounted() {this.getData()},computed:{showStatus(){return this.$store.state.status;}}}
</script>

H:\vue\vue_webback\src\App.vue

<template><div id="app"><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><!--<a class="nav-link" href="#">Hello 1</a>--><router-link class="nav-link" :to="'/'">Hello 1</router-link></li><li class="nav-item"><!-- 不写 v-bind 也可以，就像绑定别的属性一样 --><router-link class="nav-link" :to="'hello2'">Hello 2</router-link></li><li class="nav-item"><router-link class="nav-link" :to="'pages'">List</router-link></li>         <li class="nav-item"><router-link class="nav-link" :to="'pagesVuex'">ListVuex</router-link></li></ul><div class="form-inline mr-3"><select name="" id="" class="form-control" @change="changeStatus" v-model="status"><option value="线上">线上</option><option value="线下">线下</option></select></div><div class="navbar-text">Hi，{{username}}|{{showUsername}}</div></div></nav><router-view :status="myStatus" @pushNewName="getNewName"></router-view></div>
</template><script>export default {name: 'App',data() {return {status: "线上",myStatus: "线上",username:'',vuexStatus:this.$store.state.status}},methods: {changeStatus() {this.myStatus = this.status;},getNewName(newName) {let vm = thisvm.username = newName;}},computed:{showUsername(){return  this.$store.state.username}}}
</script><style lang="scss">@import "~bootstrap/scss/bootstrap.scss";</style>

git地址https://gitee.com/liuande/vue_project

vue 项目级别工程搭建-vuex的status，vue选中数据（七）相关推荐

【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题参考文章: (1)[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 (2)https:// ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
从零开始搭建分布式电商网站(2)--项目简介+工程搭建
目录一.淘淘商城简介二.功能介绍三.系统架构四.技术选型+开发环境 1.技术选型 2.开发工具和环境五.创建公共工程 1.创建taotao-parent工程,用于统一版本号 2.创建taot ...
如何搭建vue项目，完整搭建vue项目
完整开源vue项目第一步npm安装首先:先从nodejs.org中下载nodejs 直到Finish完成安装. 打开控制命令行程序(CMD),检查是否正常第二步项目初始化 1.第一步:安装vue ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
electron打包现成的vue项目成.exe文件，build打包vue项目（quasar 框架）
前言: 公司已有web端vue项目,现在有需求,需要把web端的该项目用electron打包成 .exe 可执行文件. 思考:打包成 .exe 文件,首先需要将vue项目在本地打包成静态可运行文件,其 ...
vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
vue项目如何放到服务器上,怎么把vue项目放在node服务器上？
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. 将vue项目 ...
【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口
记录在项目开发过程中遇到的小问题,积累开发经验,欢迎大家一起留言探讨问题我们在vue项目中打包的时候,webpack会将我们的组件,html,js,css,jpg等其他文件进行打包,其中请求的ip ...

vue 项目级别工程搭建-vuex的status，vue选中数据（七）

Vuex 是什么？

#什么情况下我应该使用 Vuex？

vue 项目级别工程搭建-vuex的status，vue选中数据（七）相关推荐

最新文章

热门文章