首先，因为我有一个需求就是vue组件中有一组多选框，选中多选框的内容，要在另一个组件中进行视图更新，这个就设计的兄弟组件之间的通信了，兄弟组件之前通信我首先选用的 vuex 这个解决办法。

vuex的state用来放数据，我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  messArray:[]
const mutations = {
  modifyArray(state, obj){
    state.messArray=obj.messArray
    // Vue.$set(this,this.messArray,[...obj.messArray])
const actions={
  modifyArr(context,obj){
    context.commit('modifyArray',obj)
export default new Vuex.Store({
  state,
  mutations,
  actions
然后在组建的data中，通过mapState映射过去：
 
//在使用事前必须引入这个
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
data() {
      return {
        ...mapState(["messArray"]),
然后在watch中设置了监听：
 
watch:{
        messArray: function(val){
        console.log("watch ChildA.vue "+val)
这个时候问题就出来了，虽然数组修改了，但是watch就是监听不到。
 
在我搜索了一些网上的办法之后，发现大部分我都用不来，最后只能巧妙的通过computed和getter解决了这个问题。
 给刚才的store.js添加一个getter
 
const getters = {
  messArray_get:state=>state.messArray,
然后在要监听变化的组件中的computed中添加如下代码：
 
  ...mapGetters(['messArray_get']),
然后在watch中这样写
 
    watch:{
       messArray_get : function(val){
          console.log("messArray_get "+val)

 大功告成，就是如此简单巧妙。
                    前言首先，因为我有一个需求就是vue组件中有一组多选框，选中多选框的内容，要在另一个组件中进行视图更新，这个就设计的兄弟组件之间的通信了，兄弟组件之前通信我首先选用的vuex这个解决办法。问题vuex的state用来放数据，我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下：import Vue from 'vue'import Vuex from 'vu...
				
先说一下今天遇到的问题：我需要在点击按钮时触发事件，将点击数据所在行的key保存到state数组，然后就想当然的使用 push() 函数，重置state数组：
this.setState({
    selectAppRowKeys:this.state.selectAppRowKeys.push(appCode)
然后就出现了问题：
console.log('selectAppRowKeys',this.state.selectAppRowKeys)
// 打印console.log值为
				
vuex主要是vue的状态管理，如果我们在项目中只通过传参、缓存等方式来同步data中的值，一旦项目变得大了页面多并且很复杂的时候就会变得很难维护和管理。vuex就把我们频繁使用的值进行集中管理，可以在整个项目中共同使用
state：存储状态（变量）。使用：$sotre.state.xxx
getters：可以理解为state的计算属性。加工state成员给外界。使用：$sotre.getters.functionName()
mutations：修改状态，并且是同步的。可以用来修改state中的状态。使
 * @Date: 2020-06-14 09:47:03
 * @LastEditTime: 2021-08-12 17:20:02
 * @FilePath: \EmAtlas\src\store.js
import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.S
				
监视vuex，state中某个状态的变化
解决问题的思路是通过 vue 的 computed计算属性将state中要监视的数据取出来，然后通过 watch监视属性监视其变化，以实现某些操作
如我们要监视 state中 的 todos，当todos发生变化时将它更新到本地存储就可以通过下面的代码来实现
computed: {
    todos() {
        return this.$...
				
介绍：这篇文章为新手而准备，刚接触vue的小伙伴们福利到了。可能会有很多没有说到的地方，或者说错的放请见谅。或者私信我。及时回答你的难题。
学习vue，无非就是多敲多练，多看多学。类似于语法糖，如果不知道什么是语法糖的话，我这里就不多说了，想知道语法糖的话看这个地址：https://blog.csdn.net/Merlin2017/article/details/78075206。
实际上已经接触过一种在组件中获取vuex的state对象中属性的方法，即可以在插值表达式中用$store.state.co
				
sate的变化和使用一、state的变化和使用1、reactive1.什么是reactive2.reactive注意点2、state的类型3.setup里面的vuex的使用方式4.封装获取state方式
最近公司项目需要使用vue3，发现vue3中的state变化较大，就干脆系统的学习下。把笔记做好站位，后面随时更新吧。
vue2中的state之前做过笔记，不懂得可以翻阅 深入剖析vuex.
一、state的变化和使用
本文部分借鉴自大佬的笔记.
vue3中state获取状态的方法有多种，如下图所示，那么我
类型：{ [key: string]: Function | { get: Function, set: Function } }
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
				
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它可以将应用程序中的各种状态集中存储到一个容器中，统一管理与操作。同时，Local Storage是浏览器提供的一种本地储存数据的方式，可以将数据保存在浏览器中，不会轻易地被清除或丢失。
将Vuex与Local Storage结合起来，可以实现实时动态监听storage的变化。当Vuex中的状态发生改变时，可以通过LocalStorage将其同步到浏览器的存储中，同时在浏览器中对LocalStorage的变化进行监听，并将其同步回Vuex的状态中，实现状态的统一维护和同步更新。
在实际应用中，可以通过Vue插件和Mutation监听Local Storage的变化，如下所示：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    // 状态数据
  mutations: {
    // 改变状态的方法
// 监听localStorage的变化
window.addEventListener('storage', (event) => {
  if (event.storageArea === localStorage) {
    try {
      const state = JSON.parse(event.newValue)
      // 使用store.replaceState替换store中的状态
      store.replaceState(Object.assign({}, store.state, state))
    } catch (e) {}
//将状态存储到localStorage中
store.subscribe((mutation, state) => {
  localStorage.setItem('state', JSON.stringify(state))
export default store
通过以上代码，在浏览器中可以对LocalStorage的变化进行监听，并将其同步到Vuex的状态中。在操作Vuex状态时，也会自动更新LocalStorage中的数据，以实现状态的同步更新。这种方式可以有效地解决局部数据丢失和浏览器刷新后页面状态丢失的问题。