vue中vuex的详解

概念

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

安装

1. HTML 中使用 script 标签引入

   script src="vue.js">script>
   script src="vuex.js">scrip

2. Vue项目中使用 npm 下载安装（需要安装 Node 环境）

   // 下载
   npm install vuex --save
   
   // 安装
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   

Vuex 图示

Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

body>
div id="app">
    input type="button" value="+" @click="add">
    {{this.$store.state.count}}
    input type="button" value="-" @click="reduce">
    {{this.$store.getters.synchro}}
    input type="button" value="改变为10" @click="changeNum">
div>
script src="vue.js">script>
script src="vuex.js">script>
script>
    var store = new Vuex.Store({
        state: {
            count: 0
        },
        getters: {
            synchro(state) {
                return state.count
            }
        },
        mutations: {   
            increment(state) {
                state.count++
            },
            inreduce(state) {
                state.count--
            },
            inchange(state, num) {
                state.count = num
            }
        },
        actions: {
            change(context, num) {
                context.commit('inchange', num)
            }
        }
    })

    new Vue({
        el: '#app',
        store,
        methods: {
            add() {
                this.$store.commit('increment')
            },
            reduce() {
                this.$store.commit('inreduce')
            },
            changeNum() {
                this.$store.dispatch('change', 10)
            }
        }
    })
script>
body>

Vue 项目中 vuex 的使用（两种）

1. 把 vuex 写在 main.js 文件里

   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import Vuex from 'vuex'
   
   // 全局状态管理
   Vue.use(Vuex)
   
   Vue.config.productionTip = false
   
   var store = new Vuex.Store({
     state: {
       num: 0
     },
     mutations: {
       changeNum(state, num){
         state.num += num
       }
     }
   })
   
   new Vue({
     el: '#app',
     store,
     router,
     components: { App },
     template: ''
   })
   

在组件中调用

template>
	div>
		input type="button" value="改变count的值" @click="change">
    	{{this.$store.state.count}}
	div>
template>
script>
export default {
	name: '',
	data () {
    	return {
		}
    },
    methods: {
		change() {
			this.$store.commit('changeNum', 10)
		}
	}
}
script>2

2.把vuex分离出来

 在 src 目录下创建一个 vuex 目录，新建 modules 目录 和 index.js 文件 放到 vuex 目录下
  在 main.js 文件里引入 vuex 目录

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: ''
})

在 index.js 里写上如下代码

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

Vue.use(Vuex)

let modules = {}

const requireAllModules = require.context("./", true, /\.js$/)

requireAllModules.keys().forEach(key => {
  let module = requireAllModules(key).default
  if (module && module.name && module.namespaced) {
    modules[module.name] = module
  }
})

export default new Vuex.Store({
  modules: modules,
  strict: process.env.NODE_ENV !== "production"
})

在 modules 目录下 新建 city.js 文件，里面代码如下

export default {
  name: "city",
  namespaced: true,
  state: {
    cityName: '',
    cityCode: ''
  },
  getters: {
    getState(state) {
      return state
    },
    getCityCode(state) {
      return state.cityCode
    }
  },
  mutations: {
    changeCity(state, cityName) {
      state.cityName = cityName
    }
  }
}

 在组件里设置值

template>
	div>
		ul>
          li v-for="item in city" @click="handChangeCity(item.name)">li>
        ul>
	div>
template>
script>
import { mapMutations } from 'vuex'   // 引入vuex
export default {
	name: "city",
	data() {
		return {
			city: [
				{ id: 1, name: '北京' }
				{ id: 2, name: '上海' }
				{ id: 3, name: '广州' }
				{ id: 4, name: '深圳' }
				{ id: 5, name: '厦门' }
			]
		}
	},
	methods: {
		// 修改
		...mapMutations({
			changeCity: "city/changeCity"
		}),
		// 第一种写法
		handChangeCity(cityName) {
			this.changeCity(cityName)
		}
		// 第二种写法  不需要使用 ...mapMutations
		handChangeCity(cityName) {
			this.$store.commit('city/changeCity', cityName);
		}
	}
}
script>

 在另一个组件里使用

template>
	div>
		div>{{getState.cityName}}div>
		div>{{getCityCode}}div>
	div>
template>
script>
import { mapGetters} from 'vuex'   // 引入vuex
export default {
	data() {
		return {
		}
	},
	computed: {
	    // 第一种使用方法
	    ...mapGetters({
	    	getState: "city/getState"
	    })
	    // 第二种使用方法
	    ...mapGetters('city', ['getState', 'getCityCode'])
  	}
}
script>