Vue-VueX

VueX简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

VueX概述

• state类比于data
• mutation类比于methods，更改state状态
• action主要写异步方法
• getters类比于computed

模板原始写法：

一级：

获取state

$store.state.属性名     /    $store.state[属性名]

获取getters

$stroe.getters[属性名]

调用方法mutations

this.$store.commit(方法名称,传入的值)

调用异步方法actions

this.$store.dispatch(方法名称,传入的值)

二级：

获取state

$store.state.模块名.属性名     /    $store.state[模块名/属性名]

获取getters

$stroe.getters[模块名/属性名]

调用方法mutations

this.$store.commit(模块名/方法名称,传入的值)

调用异步方法actions

this.$store.dispatch(模块名/方法名称,传入的值)

模块解构写法：

首先导入方法

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

一级：

computed: {

// 模块名（没有的话，属于节点），值

...mapState( [属性名1，属性名2]),

...mapGetters([gettersName1,gettersName2])

},

methods: {

...mapMutations( [方法名1，方法名2]),

...mapActions([ActionName1，ActionName2])

}

二级：

computed: {

// 模块名（没有的话，属于节点），值

...mapState( 模块名,[属性名1，属性名2]),

...mapGetters(模块名,[gettersName1,gettersName2])

},

methods: {

...mapMutations(模块名, [方法名1，方法名2]),

...mapActions(模块名,[ActionName1，ActionName2])

}

代码演示

main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'

Vue.config.productionTip = false

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

 App.vue

<template>
  <div>
    <Son1></Son1>
    <Son2></Son2>
    <hr>
    <Son3></Son3>
    <Son4></Son4>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import Son3 from './components/Son3.vue'
import Son4 from './components/Son4.vue'

export default {
  components: {
    Son1,
    Son2,
    Son3,
    Son4
  }
}
</script>

<style>

</style>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'

Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store({
  modules: {
    user
  },
  state: {
    name: '一级'
  },
  mutations: {
    setName (state, newName) {
      state.name = newName
    }
  },
  actions: {
    setNameAsync (content, newName) {
      setTimeout(() => {
        content.commit('setName', newName)
      }, 1000)
    }
  },
  getters: {
    UpperCaseName (state) {
      return state.name.toUpperCase()
    }
  }
})

console.log(store)

export default store

stroe/modules/user.js

// 相当于data
const state = {
  name: '小明'
}
// 相当于方法
const mutations = {
  setName (state, newNmae) {
    state.name = newNmae
  }
}
// 相当于异步方法
const actions = {
  setNameAsync (context, newNmae) {
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setName', newNmae)
    }, 1000)
  }
}
// 相当于计算属性
const getters = {
  // 分模块后，state指代子模块的state
  UpperCaseName (state) {
    console.log(state.name)
    return state.name.toUpperCase()
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

components/Son1.vue

<template>
  <div>
    <h1>模块原始写法</h1>
    <div>
      <span>原始值：{{ $store.state.user.name }}</span>
      <span>转化值：{{ $store.getters['user/UpperCaseName'] }}</span>
      <input type="text" v-model="uname" placeholder="请输入要修改的值">
      <button @click="handleSetName">修改</button>
      <button @click="handleSetNameAsync">1S后修改</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SonView1',
  data () {
    return {
      uname: ''
    }
  },
  methods: {
    handleSetName () {
      // 模块名/方法（没有的话，属于节点），传入的值
      this.$store.commit('user/setName', this.uname)
    },
    handleSetNameAsync () {
      this.$store.dispatch('user/setNameAsync', this.uname)
    }
  }
}
</script>

<style scoped>
input {
  margin: 0 10px;
}
</style>

components/Son2.vue

<template>
  <div>
    <h1>模块释构写法</h1>
    <div>
      <span>原始值：{{ name }}</span>
      <span>转化值：{{ UpperCaseName }}</span>
      <input type="text" v-model="uname" placeholder="请输入要修改的值">
      <button @click="setName(uname)">修改</button>
      <button @click="setNameAsync(uname)">1S后修改</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'SonView2',
  data () {
    return {
      uname: ''
    }
  },
  computed: {
    // 模块名（没有的话，属于节点），值
    ...mapState('user', ['name']),
    ...mapGetters('user', ['UpperCaseName'])

  },
  methods: {
    ...mapMutations('user', ['setName']),
    ...mapActions('user', ['setNameAsync'])
  }
}
</script>

<style>

</style>

components/Son3.vue

<template>
  <div>
    <h1>一级原始写法</h1>
    <div>
      <span>原始值：{{ $store.state.name }}</span>
      <span>转化值：{{ $store.getters.UpperCaseName }}</span>
      <input type="text" v-model="uname" placeholder="请输入要修改的值">
      <button @click="handleSetName">修改</button>
      <button @click="handleSetNameAsync">1S后修改</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname: ''
    }
  },
  name: 'SonView3',
  methods: {
    handleSetName () {
      this.$store.commit('setName', this.uname)
    },
    handleSetNameAsync () {
      this.$store.dispatch('setNameAsync', this.uname)
    }
  }
}
</script>

<style>

</style>

components/Son4.vue

<template>
  <div>
    <h1>一级释构写法</h1>
    <div>
      <span>原始值：{{ $store.state.name }}</span>
      <span>转化值：{{ $store.getters.UpperCaseName }}</span>
      <input type="text" v-model="uname" placeholder="请输入要修改的值">
      <button @click="setName(uname)">修改</button>
      <button @click="setNameAsync(uname)">1S后修改</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return {
      uname: ''
    }
  },
  name: 'SonView4',
  computed: {
    ...mapState(['name']),
    ...mapGetters(['UpperCaseName'])
  },
  methods: {
    ...mapMutations(['setName']),
    ...mapActions(['setNameAsync'])
  }
}
</script>

<style></style>