vue vuex状态管理

安装

• 安装vuex依赖包

npm i vuex -S

• 导入vuex包，创建store对象

// --store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
​
export default new Vuex.Store({
  state: {}, // state 存放全局共享的数据
  getters: {}, // getters 用于对store中的数据进行加工处理形成新的数据，并return
  mutations: {}, // mutations 用于变更state中的数据
  actions: {}, // actions 用于处理异步操作
  modules: {},   // 模块化                     
})

• 入口文件main.js，将store对象挂载到vue实例中

// --main.js
import store from "./store";
​
new Vue({
  router,
  // 将创建的共享数据对象，挂载到vue实例中
  // 所有的组件，可直接从store中获取全局的数据
  store,
  render: (h) => h(App),
}).$mount("#app");

State

state：提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储

// 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
    state:{count:0}
})

组件访问state中数据的方式：

• 方式一：

  // this.$store.state.全局数据的名称
  this.$store.state.count
  
  // 使用
  <p>{{ $store.state.count }}</p>
  

• 方式二：

  // 1.从vuex中按需导入 mapState函数
  import { mapState } from 'vuex'
  // 2.将全局数据，映射为当前组件的计算属性
  // 导入mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
  computed:{
      ...mapState(['count'])
  }
  ​
  // 使用
  <p>{{count}}</p>
  

Mutations

mutations：用于变更store中的数据

注意：

• 在vuex中，只能通过mutations修改store数据，不可在组件中直接操作store中的数据
• 通过这种方式操作略繁琐，但可集中监控所有数据的变化

// 定义mutation
cosnt store = new Vuex.Store({
    state:{count:0},
    mutations:{
        // 基本使用
        ADD(state){
            state.count++
        },
        // 如果需要接收传递的参数 value  传递过来的参数
        ADDN(state, value){
            state.count += value
        }
    }
})

触发mutation的方式：

• 方式一：

  methods:{
      handle(){
          // 触发mutations的第一种方式
          // commit的作用：调用某个mutation函数
          this.$store.commit('ADD')
          // comimit 的第二个参数为传递的参数 
          this.$store.commit('ADDN', 3)
      }
  }
  

• 方式二

  // 1.从vuex中按需导入mapMutations函数
  import { mapState, mapMutations } from 'vuex'
  // 2.将指定的mutations函数，映射为当前组件的methods函数
  // 通过导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
  methods:{
      ...mapMutations(['ADD', 'ADDN']),
     add(){
          // 括号内为传递的参数
          this.ADDN(3)
      } 
  }
  

Actions

actions：用于处理异步操作

如果通过异步操作变更数据，必须通过actions，而不能使用mutations，但是在actions中还是要通过触发mutations的方式间接变更数据

actions只有处理异步操作的功能，并不能直接修改state中的数据！！！

// 定义action
const store = new Vuex.Store({
    mutations:{
        ADD(state){
            state.count++
        },
        ADDN(state,val){
            state.count += val
        }
    },
    actions:{
        addAsync(context){
            console.log(context)
            setTimeout(()=>{
                // 在actions中，不能直接修改state数据
                // 必须通过context.commit()触发某个mutations中的方法才可修改
                // 只有mutations中定义的函数，才有权力修改state中的数据
                context.commit('ADD')
            },1000)
        },
        // 可将commit结构出来，简化代码
        // 如果需要在acyions里面触发actions的方法，可将dispatch解构出来
        // 触发actions异步任务时携带参数，第二个参数为携带的参数
         addAsync2({commit}, view){
            setTimeout(()=>{
                commit('ADDN', view)
            },1000)
        }  
    }
})

触发actions的方式：

• 方式一：

  methods:{
      handle(){
          // 触发actions的第一种方式
          this.$store.dispatch('addAsync')
          // 触发actions时，携带参数
          this.$store.dispatch('addAsync', 5)
      }
  }
  

• 方式二：

  // 1.从vuex中按需导入mapActions函数
  import { mapActions} from 'vuex'
  ​
  // 2.将指定的actions函数，映射为当前组件的methods函数
  // 通过导入的mapActions函数，将需要actions的函数，映射为当前组件的methods方法
  methods:{
      ...mapActions(['addAsync2']),
      handle() {
        // 3.触发actions函数
        this.addAsync2(8)
      }
  }
  

Getters

getters：用于对store中的数据进行加工处理形成新的数据

注意：

• getters不会修改store中的原数据，只会将store里的原数据加工处理再return出来，类似Vue的计算属性
• store中的数据发生变化，getters的数据也会跟着变化

// 定义getters
const store = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        showNum(state){
            return '当前最新的count值是：' + state.count
        }
    }
})

使用getters的方式：

• 方式一：

  this.$store.getters.名称
  <p>{{$store.getters.名称}}</p>
  

• 方式二：

  import { mapGetters } from 'vuex'
  computed:{
      ...mapGetters['showNum']
  }
  <p>{{ showNum }}</p>