vuex状态管理（一）基本用法

vuex核心概念：

1 State 状态、数据
2 Mutation 更改状态函数
3 Action 异步操作
4 store包含以上概念的容器

引入：

npm install vuex --save

store.js

import Vue from "vue";
import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({
 state: { count:0 },
 mutations: {
 add(state, n = 1) {
 state.count += n;
 }
 }
})

用法：

1、使用状态state

<template>
 <div>
 <div>添加数据{{$store.state.count}}个</div>
 <button @click="add">add</button>
 </div>
</template>
<script>
export default {
 methods: {
 add() {
 this.$store.commit("add");
 }
 }
};
</script>

2、派生状态 - getters
从state派生出新的状态，类似计算属性

  getters: {
        score() {
            return `数值是${state.count}`
        }
    },

页面使用

 <div>派生数据score：{{$store.getters.score}}</div>

3、动作 - actions
复杂的业务逻辑处理，类似controller

    actions: {
        //比如ajax请求
        //commit,state上下文数据值
        asynAdd({ commit }, n = 1) {
            return new Promise(resolve => {
                setTimeout(() => {
                    commit('add');
                    resolve({ ok: 1 })
                }, 1000);
            })

        }
    }

使用actions：

<template>
  <div id="app">
      <div>记录数据：{{$store.state.acount.count}}</div>
    <button @click="asynAdd">asynAdd</button>
  </div>
</template>

<script>
export default {
  methods: {
    // asynAdd() {
    //   //dispatch调用的是actions里的方法
    //   this.$store.dispatch("acount/asynAdd").then(res => {
    //     //方法1、因为返回promise所以可以用then 去接收返回的参数
    //     console.log("res", res);
    //   });
    // }
    方法2、 asyn await
     async asynAdd() {
       const res = await this.$store.dispatch("acount/asynAdd");
       console.log("res", res);
     }
  }
};
</script>

4、模块化
按模块的方式编写代码，store.js
1)store/count.js

export default {
    namespaced: true,//独立命名空间，访问就需要加上模块的名字
    state: { count: 0 },
    mutations: {
        increment(state, n = 1) {
            state.count += n;
        }
    },
    //派生用法
    getters: {
        score() {
            return '99999'
        }
    },
    //actions做复杂的业务，类似controller
    actions: {
        //比如ajax请求
        //commit,state上下文数据值
        asynAdd({ commit }, n = 1) {
            console.log('commit', commit)
            return new Promise(resolve => {
                setTimeout(() => {
                    commit('increment');
                    resolve({ ok: 1 })
                }, 1000);
            })

        }
    }
}

2)统一管理模块，store/index.js

import Vue from "vue";
import Vuex from 'vuex';
import count from './count'

Vue.use(Vuex)
//这里导出store的实例，又把store混入mixin Vue原型里，
//所以在页面上可以通过 this.$store[store实例]
export default new Vuex.Store({
    //modules 模块化
    modules: {
        acount: count
    }
})

3）页面使用：

<template>
  <div id="app">
    <div>记录数据：{{$store.state.acount.count}}</div>
    <div>派生数据：{{$store.getters['acount/score']}}</div>
    <button @click="add">add</button>
    <button @click="asynAdd">asynAdd</button>
  </div>
</template>

<script>
export default {
  methods: {
    add() {
      this.$store.commit("acount/increment");
    },
    async asynAdd() {
      const res = await this.$store.dispatch("acount/asynAdd");
      console.log("res", res);
    }
  }
};
</script>