State状态 #

const store = createStore({
  state: {
    // 应用中所有的状态都在这里
    user: null,
    products: [],
    cart: [],
    settings: {}
  }
})

单一状态树优势
├── 集中管理 ──── 所有状态在一处管理
├── 易于调试 ──── 状态快照清晰
├── 响应式 ───── 状态变化自动更新视图
└── 可预测 ───── 状态变更可追踪

import { createStore } from 'vuex'

const store = createStore({
  state: {
    // 基本类型
    count: 0,
    message: 'Hello Vuex',
    isActive: true,
    
    // 对象
    user: {
      name: 'John',
      age: 25
    },
    
    // 数组
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build App', done: false }
    ]
  }
})

// 方式一：直接定义
const store = createStore({
  state: {
    count: 0
  }
})

// 方式二：使用函数返回（推荐用于 SSR）
const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

<template>
  <div>
    <p>{{ $store.state.count }}</p>
    <p>{{ $store.state.user.name }}</p>
  </div>
</template>

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ userName }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    userName() {
      return this.$store.state.user.name
    }
  }
}
</script>

import { mapState } from 'vuex'

export default {
  computed: {
    // 使用对象展开运算符
    ...mapState({
      // 箭头函数
      count: state => state.count,
      
      // 传字符串参数
      user: 'user',
      
      // 使用 this 访问组件局部状态
      fullName(state) {
        return `${state.user.firstName} ${this.localLastName}`
      }
    })
  }
}

import { mapState } from 'vuex'

export default {
  computed: {
    // 当映射的计算属性名称与 state 子节点名称相同时
    ...mapState([
      'count',
      'user',
      'todos'
    ])
  }
}

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      currentCount: 'count',
      currentUser: 'user'
    })
  }
}

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    
    return {
      count: computed(() => store.state.count),
      user: computed(() => store.state.user)
    }
  }
}
</script>

// composables/useUser.js
import { computed } from 'vue'
import { useStore } from 'vuex'

export function useUser() {
  const store = useStore()
  
  const user = computed(() => store.state.user)
  const isLoggedIn = computed(() => store.getters.isLoggedIn)
  
  const login = async (credentials) => {
    await store.dispatch('login', credentials)
  }
  
  const logout = () => {
    store.commit('SET_USER', null)
  }
  
  return {
    user,
    isLoggedIn,
    login,
    logout
  }
}

<!-- 使用封装的组合式函数 -->
<script>
import { useUser } from '@/composables/useUser'

export default {
  setup() {
    const { user, isLoggedIn, login, logout } = useUser()
    
    return {
      user,
      isLoggedIn,
      login,
      logout
    }
  }
}
</script>

// 推荐：扁平化结构
state: {
  users: {
    byId: {
      1: { id: 1, name: 'John' },
      2: { id: 2, name: 'Jane' }
    },
    allIds: [1, 2]
  },
  posts: {
    byId: {
      101: { id: 101, title: 'Post 1' },
      102: { id: 102, title: 'Post 2' }
    },
    allIds: [101, 102]
  }
}

// Getter 中获取数据
getters: {
  allUsers: state => state.users.allIds.map(id => state.users.byId[id]),
  userById: state => id => state.users.byId[id]
}

// 不推荐：深层嵌套
state: {
  app: {
    data: {
      users: {
        list: {
          items: []
        }
      }
    }
  }
}

// 推荐：扁平结构
state: {
  users: [],
  posts: [],
  comments: []
}

state: {
  // 实体数据
  users: {
    byId: {},
    allIds: []
  },
  posts: {
    byId: {},
    allIds: []
  },
  
  // 关系映射
  userPosts: {
    1: [101, 102],  // 用户 1 的文章
    2: [103]        // 用户 2 的文章
  }
}

getters: {
  userPosts: state => userId => {
    const postIds = state.userPosts[userId] || []
    return postIds.map(id => state.posts.byId[id])
  }
}

// 推荐：初始化所有状态
state: {
  user: null,
  posts: [],
  loading: false,
  error: null
}

// 不推荐：未初始化
state: {
  user: undefined  // 可能导致响应式问题
}

// 状态命名清晰
state: {
  isLoading: false,
  hasError: false,
  errorMessage: ''
}

// 按功能组织状态
state: {
  // 用户相关
  user: null,
  isLoggedIn: false,
  
  // 产品相关
  products: [],
  categories: [],
  
  // UI 状态
  loading: false,
  error: null
}

// 错误：直接修改
this.$store.state.count = 10

// 正确：通过 mutation
this.$store.commit('SET_COUNT', 10)

// 问题：添加新属性不触发响应
this.$store.state.user.newProp = 'value'

// 解决：使用 Vue.set 或替换整个对象
// 在 mutation 中
mutations: {
  ADD_PROP(state, { key, value }) {
    state.user = { ...state.user, [key]: value }
  }
}

// 问题：通过索引修改
state.array[0] = newValue

// 解决：使用 splice 或替换
mutations: {
  UPDATE_ARRAY(state, { index, value }) {
    state.array.splice(index, 1, value)
    // 或
    state.array = state.array.map((item, i) => 
      i === index ? value : item
    )
  }
}