Vuex的状态管理

一、什么是Vuex

专为Vue.js应用程序开发的状态管理模式

state:驱动应用的数据源

view:以声明方式将state映射到视图

actions:响应在view上的用户输入导致的状态变化

二、Vuex的工作流程

state:存放数据

mutation:同步提交数据

action:异步提交数据

三、安装及配置

第一步：安装

npm install vues -S

第二步，配置

Vue.use(Vuex)

export default new Vuex.Store({

    state:{},
    mutations:{},
    actions:{},
    modules:{}
})

new Vue({
    router,
    store,
    render:h => h(app)

}).$mount('#app')

在store下的index.js中添加

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

在main.js中添加

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


new Vue({
  router,
  store,
  render: h => h(App),
  
}).$mount('#app')

四、state

含义，单一状态树，全局唯一数据源

4.1 查询state中的数据

computes:{

    user(){
    return this.$store.state.user
}
}

五、 使用Vuex保存用户信息

5.1 mutations

更改store中状态的唯一方法，可以跟踪每一个数据的变化

实例代码：

首先要在mutations中定义一个函数state,这个state表示的是Vuex中的state,在Vue组件中通过store.commit的方式传递参数，传递的参数就是mutations方法的名称，提交改变里面的内容

mutations:{

    increment(state){
    //变更状态
    state.count++

}
}
//提交
store.commit('increment')

举例：写一个输入框，改变state里面原来的内容

<template>
  <div>
    <!-- view -->
    <h1>首页</h1>
    <p>当前计数: {{ count }} </p>
    <input type="button" value="+1" @click="increment">
    <p>
            <!--改变这里内容-->
      当前登录的用户是：{{ user.username }}
    </p>
    <p>
      <input type="text" v-model="uname">
      <input type="button" value="提交" @click="submit">
    </p>
  </div>
</template>
<script>
export default {
  // state
  data () {
    return {
      count: 0,
      uname: ''
    }
  },
  // actions
  methods: {
    increment () {
      this.count++
    },
    //在这里写submit,这个方法改变state里面的username
    submit () {
      // this.$store.state.user.username = 'wangwu'
      this.$store.commit('updateUsername', {
        uname: this.uname
      })
      
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    }
  }
}
</script>

mport Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      username: 'zhangsan',
      nickname: '张三'
    }
  },
  mutations: {
    updateUsername (state, payload) {
      console.log(state, payload)
      this.state.user.username = payload.uname
    },
    updateUsername2 (state, uname) {
      console.log(state, uname)
      this.state.user.username = uname
    }
   
})

5.2 action

提交是mutation，可异步

示例代码

actions:{
    increment(content){
    context.commit('increment')

}
}

store.dispatch('increment')

actions: {
    updateUser (context, payload) {
      setTimeout(() => {
        context.commit('updateUsername2', payload.uname)
      }, 5000)
    }
  },

submit () {
     
      this.$store.commit('updateUsername2', this.uname)
      this.$store.dispatch('updateUser', {
        uname: this.uname
      })
    }

六、辅助函数

mapState 可以在computed中使用

mapMutations

map

<template>
  <div>
    <!-- view -->
    <h1>首页</h1>
    <p>当前计数: {{ count }} </p>
    <input type="button" value="+1" @click="increment">
    <p>
      <!-- 当前登录的用户是：{{ username }} - {{ nname }} -->
      当前登录的用户是：{{ user.username }} - {{ profile.name }}
    </p>
    <p>
      <input type="text" v-model="uname">
      <input type="button" value="提交" @click="submit">
    </p>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  // state
  data () {
    return {
      count: 0,
      uname: ''
    }
  },
  // actions
  methods: {
    // ...mapMutations(['updateUsername']),
    ...mapMutations({
      update: 'updateUsername'
    }),
    // ...mapActions(['updateUser']),
    ...mapActions({
      updateUserInfo: 'updateUser'
    }),
    increment () {
      this.count++
    },
    submit () {
      // this.$store.state.user.username = 'wangwu'
      // this.$store.commit('updateUsername', {
      //   uname: this.uname
      // })
      // 使用mapMutations之后
      // this.updateUsername({uname: this.uname})
      // this.update({uname: this.uname})

      // this.$store.commit('updateUsername2', this.uname)
      // this.$store.dispatch('updateUser', {
      //   uname: this.uname
      // })
      // 使用mapActions之后
      // this.updateUser({uname: this.uname})
      this.updateUserInfo({uname: this.uname})
    }
  },
  // computed: {
  //   user () {
  //     return this.$store.state.user
  //   }
  // }
  // 传递对象
  // computed: mapState({
  //   username: state => state.user.username,
  //   nname: state => state.user.nickname
  // })
  // 传递数组 
  // computed: mapState(['user', 'profile'])
  computed: {
    conent () {
      return ''
    },
    ...mapState(['user', 'profile'])
  }
}
</script>