Vuex的状态管理

1，什么是Vuex

Vuex是一个专为Vue.js设计的状态管理模式它采用集中式存储管理应用的所有组件状态解决了组件之间同一状态的共享问题。但它繁琐冗余并不适合简单的小应用。

2,Vuex的使用

1、src目录下面新建一个vuex的文件夹
2、vuex 文件夹里面新建一个store.js
3、安装vuex

cnpm install vuex --save

4、在刚才创建的store.js引入vue 引入vuex 并且use vuex

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

	Vue.use(Vuex)

5、定义数和方法

//state在vuex中用于存储数据
const state = {
    count: 1
}
// mutations里面放的是方法，方法主要用于改变state里面的数据
const mutations = {
    increment() {
        state.count++;
    },
    decrement() {
        state.count--;
    }
}

6，getters类似计算属性，改变count数据的时候会触发getters里面的方法获取新的值

const getters = {
    computedCount: (state) => {
        return state.count * 2
    }
}

7，actions类似于mutations不同于：actions中提交的是mutations而不是直接变更状态

const actions = {
    incMutationsCount(context) { /*因此你可以调用 context.commit 提交一个 mutation*/


        context.commit('increment'); /*执行 mutations 里面的increment方法 改变state里面的数据*/


    },
    decMutationsCount(context) { /*因此你可以调用 context.commit 提交一个 mutation*/


        context.commit('decrement'); /*执行 mutations 里面的decrement方法 改变state里面的数据*/


    }

}

8，暴露

const store = new Vuex.Store({
    state,
    mutations，
    getters,
    actions
})
export default store;

9，组件里面使用vuex
1)引入store

import store from '../src/vuex/store'

2)挂载

export default {
  name: 'App',
  components: {
    com
  },
  store,
  methods: {
    increment(){
         this.$store.commit('increment');
    },
    decrement(){
         this.$store.commit('decrement');
    }
     
  },
}

3）获取state里面的数据

this.$store.state.数据

4）触发mutations改变state里面的数据

this.$store.commit('incCount');

5）获取getters中的数据

{{this.$store.getters.computedCount}}

6)触发actions改变state里面的数据

methods: {
    increment(){
        this.$store.dispatch('incMutationsCount');
    },
    decrement(){
        this.$store.dispatch('decMutationsCount');
    }
   
  },

10，多模块状态管理
1）在src文件夹中建立store文件夹
2）在store文件夹中建立三个子文件，分别为a.js;b.js;index.js
3)a.js文件内容如下：

const state = {
    count:1
}

//  具体方法的实现
const mutations = {
    add(state) { 
        state.count++
    },
    reduce(state) { 
        state.count--
    }
}

const actions = {
    add: ({ commit }) => { 
        commit('add')
    },
    reduce: ({ commit }) => { 
        commit('reduce')
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

b.js内容如下：

const state = {
    money:1
}

//  具体方法的实现
const mutations = {
    add(state, param) { 
        window.console.log(param);
        state.money+=param
    },
    reduce(state) { 
        state.money--
    }
}

const actions = {
    add: ({ commit },param) => { 
        commit('add',param)
    },
    reduce: ({ commit }) => { 
        commit('reduce')
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

index文件内容如下:

//   入口文件
import Vue from 'vue'
import Vuex from 'vuex'

import count from './a'
import money from './b'

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        count,
        money
    }

})