这篇文章主要讲解了“Vue的Vuex怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue的Vuex怎么使用”吧!
1.响应式
属于 vue 生态一环,,能够触发响应式的渲染页面更新。 (localStorage 就不会)
2.可预测的方式改变数据
避免数据污染
3.无需转换数据
JS 原生的数据对象写法(不需要做转换)。(localStorage 需要做转换)
1.复杂
适合大应用,不适合小型应用
2.不能持久化(刷新页面后vuex中的state会变为初始状态)
解决方案
结合localStorage
vuex-persistedstate插件
当我们多个页面需要共享数据时就可以使用Vuex。
实际开发中我们一般在下面这种情况使用它:
当前登录用户的信息
购物车的信息
收藏的信息
用户的地理位置
本处用计数器来测试:一个组件修改计数器的值,其余两个不相关组件可以监测到时计数器值的改变。
做法:一个组件(ComponentA)将数据共享给另外两个不相关组件(ComponentB和ComponentC),外部用Parent.vue放置这三个组件。
在工程目录下执行:npm install vuex
创建目录store,在其下边创建CounterStore.js,内容如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const couterStore = new Vuex.Store(
{
state: {
count1: 0,
count2: 0,
},
mutations: {
increment1(state) {
state.count1++;
},
decrement1(state) {
state.count1--;
},
increment2: state => state.count2++,
decrement2: state => state.count2--,
}
}
);
export default couterStore;
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import CouterStore from './store/CounterStore'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store: CouterStore,
components: { App },
template: '<App/>'
})
按照JS语法,key与value重名时可以简写:(很多教程这么写)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/CounterStore'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
代码
ComponentA.vue
<template>
<div class="container">
<h4>ComponentA</h4>
<button @click="increment1">增加:第1个计数器</button>
<button @click="decrement1">减少:第1个计数器</button><br><br>
<button @click="increment2">增加:第2个计数器</button>
<button @click="decrement2">减少:第2个计数器</button>
</div>
</template>
<script>
export default {
data() {
return {
count1: 0,
count2: 0,
}
},
methods:{
increment1() {
this.$store.commit('increment1')
},
decrement1() {
this.$store.commit('decrement1')
},
increment2() {
this.$store.commit('increment2')
},
decrement2() {
this.$store.commit('decrement2')
}
}
}
</script>
<style scoped>
.container {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
ComponentB.vue
<template>
<div class="container">
<h4>ComponentB</h4>
计数器的值:{{msg}}
<!--也可以这么写:-->
<!--计数器的值:{{this.$store.state.count1}}-->
</div>
</template>
<script>
export default {
computed:{
msg() {
return this.$store.state.count1;
}
}
}
</script>
<style scoped>
.container {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
ComponentC.vue
<template>
<div class="container">
<h4>ComponentC</h4>
计数器的值:{{msg}}
<!--也可以这么写:-->
<!--计数器的值:{{this.$store.state.count2}}-->
</div>
</template>
<script>
export default {
computed:{
msg() {
return this.$store.state.count2;
}
}
}
</script>
<style scoped>
.container {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
Parent.vue
<template>
<div class="outer">
<h4>父组件</h4>
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
</template>
<script>
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import ComponentC from "./ComponentC";
export default {
name: 'Parent',
components: {ComponentA, ComponentB, ComponentC},
data() {
return {
name: 'Tony',
age: 20,
phoneNumber: '1234567890'
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid red;
padding: 20px;
}
</style>
路由
import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/parent',
name: 'Parent',
component: Parent,
}
],
})
访问: http://localhost:8080/#/parent
感谢各位的阅读,以上就是“Vue的Vuex怎么使用”的内容了,经过本文的学习后,相信大家对Vue的Vuex怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。