Vue学习笔记之状态管理

第八章 vuex状态管理

8.1 Vuex介绍

• Vuex是一个专门为Vue.js应用程序开发的状态管理模式，将组件之间共享的数据（状态）放置在一个单独的容器（store）中

  • 可以看作一个加强版的data，一个全局的data属性，便于处理大量的需要在组件间传递的数据
  • 页面比较简单则最好不引入Vuex
  • Vuex也是响应式

• 什么情况下使用Vuex管理状态在多个组件间共享

  • 大型项目组件很多，多个组件共用数据

    例如：

    • 用户的登录状态、用户名称、头像、地理位置信息
    • 商品的收藏、购物车中的物品

8.2 Vuex使用

• 安装vuex

• 直接在项目入口文件(index.js)中创建一个Vuex store实例或引入一个实例：

  import store from './store'
  

• 在 store->index.js中创建Vuex store实例并进行导出

  import { createStore } from 'vuex'
  
  export default createStore({
    state: {
        //定义初始状态,该状态可以直接使用
        count:0;
    },
    getters: {
        //定义一个getter来计算派生状态，类似组件的计算属性
        countpow(state){
            return state.count*state.count;
        }
    },
    mutations: {
        //定义一个mutation来修改状态
        mu_add(state){
            state.count++;
        },
        mu_sub(state){
            state.count--;
        }
    },
    actions: {
        //定义一个action来触发mutation，用于处理异步操作或包含复杂逻辑的操作，并可以触发对应的mutations来修改状态
        ac_sub({state,commit,getters},payload){
            commit('mu_sub',payload);
        }
    },
    modules: {
        //可以将store分割成多个模块，每个模块拥有自己的state,mutations,actions,getters
    }
  })
  

• 在Vue组件中使用store: 这就是一个全局变量，在需要访问和修改状态的组件中，程序通过this.$store来访问Vuex store，在模板中不需要添加this

  export default{
      computed: {
          count(){
              return this.$store.state.count;//访问状态
          }
      },
      method:{
          sub(){
              //this.$store.state.count--;
              //使用mutation
              this.$store.commit('mu_sub')
              //使用actions
              this.$store.dispatch('ac_sub',param)
          }
      }
  }
  

  {{$store.state.count}}<br>
  <button @click="$store.state.count++">
      +
  </button><br>
  <button @click="sub()">
      -
  </button>
  使用全局的计算属性
  {{$store.getter.countpow}}<br>
  
  使用mutations
  <button @click="$store.commit('mu_add')">
      +
  </button>
  
  

• 使用 $store.commit() dispatch()等方法后，后续可以跟要传给mutation的参数，只接收一个参数，多个参数需要封装成一个的对象才能被接收

• 模块化：可以把store中的每个属性单独写成一个js文件，在index.js中导入即可，方便直接在每个相应文件中删改变量数据