vue重度使用vuex和watch的解决方法

项目中重度依赖vuex和watch,组件化非常方便,但是组件之间的数据、状态共享一直非常难处理,所以在使用了vuex后便重度依赖,并且大量使用了watch,在vue官网中一直不推荐使用watch,而是使用computed代替,但是现在也找不到一个合适的方法,下面用一个例子展示。

a页面和b页面,b页面中有5段文字,点击文字后,a页面的数据会加上选择的数据,一直累加。类似
图片描述

现在的解决方法是,每次点击文字,通过commit修改state的变量,a页面使用watch监听state变量的变化,如果改变则添加上新的数据。

代码使用了decorator和typescript

//a页面的监听

@Watch("content")

ChangeContent(x: string) {

if (!x) return;

this.text += this.content;

}

//b页面发送

ChooseText(x: string) {

this.ChangeContent(x);

}

//state

content:null

//mutation

ChangeContent(state,x){

state.content=x

}

其中代码有部分省略,但是无关紧要。

其中方法还有部分逻辑没有写,比如2次选中相同数字,watch是不会执行。现在想知道除了使用watch能监听到变化,并执行相应逻辑,还有没有其他的方法。例如computed。这只是其中的一小部分,以后碰到像是这样的问题,代码的设计思路是什么。谢谢。

回答:

你这种需求,state 里存的应该是个数组,里边是被点击的元素(这里就可以直接做去重了)。

然后就不需要 watch 了,因为 state 里就是被点击的所有元素,计算属性中直接根据这个数组计算出文本返回即可。

回答:

感觉你没有理解vuex;

clipboard.png
基本上用了vuex来储存数据以后,watch这个方法根本不会用。
https://vuex.vuejs.org/zh/guide
你可以在看一下栗子,也许会有不一样的收获.

回答:

上述说的例子是个简单的父子组件通信,没必要用vuex

回答:

如果使用了vuex,因为store中state属性是响应式(reactive),可以在页面直接使用,所以一般情况下没必要使用watch了。为了使用方便,一般会用mapState或mapGetters,将state的属性映射为计算属性,见下文中组件A的代码。

父组件:

<template>

<div>

<component-a></component-a>

<component-b></component-b>

</div>

</template>

<script>

import store from './store.js'

import ComponentA from './ComponentA.vue'

import ComponentB from './ComponentB.vue'

export default {

data () {

return {}

},

store,

components: {

'component-a': ComponentA,

'component-b': ComponentB

}

}

</script>

组件A:

<template>

<div> Count is : {{count}} </div>

</template>

<script>

import { mapState } from 'vuex'

export default {

name: 'ComponentA',

data () {

return {}

},

computed: mapState([

'count'

])

}

</script>

组件B

<template>

<div>

<ul v-for="i in 5">

<li @click="increment(i)">{{i}}</li>

</ul>

</div>

</template>

<script>

export default {

name: 'ComponentB',

data () {

return {}

},

methods: {

increment(n) {

console.log(n)

this.$store.commit('increment', n)

}

}

}

</script>

<style>

ul > li {

width: 100px;

text-align: center;

border-bottom: 1px solid gray;

cursor: pointer;

list-style: none;

}

</style>

store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

strict: true,

state: {

count: 0

},

mutations: {

increment(state, value) {

state.count += value;

}

}

})

回答:

用getters就好了呀https://vuex.vuejs.org/zh/gui...

以上是 vue重度使用vuex和watch的解决方法 的全部内容, 来源链接: utcz.com/a/148959.html

回到顶部