Vuex 基础总结

Vuex基础总结

1、Vuex:数据共享

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

2、Vuex介绍:
（1）、什么时候使用Vuex:

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

(2)、Vuex状态管理：

view ——> (dispatch) Action ——>(commit)Mutations ——> (Mutate)State ——> view

注意：
Action不是必须的，如果有异步操作才能使用到Action，否则可以不使用。

2、Vuex之mutations

(1)、安装Vuex:

npm install vuex --save-dev

(2)、在'src/'路径下创建文件:'store/index.js',其中index.js配置如下：

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

Vue.use(Vuex)

export default  new Vuex.Store({
  //设置状态对象
  state:{
    count:10
  },
  //设置mutations,包含行为事件
  mutations:{
    increment(state){
      state.count++;
    },
    decrement(state){
      state.count--;
    }
  }
})

(3)、创建两个相互独立的组件：inner.vue,outer.vue:

//inner.vue组件：

<template>
  <div>
    内部值：{{getCount}}
    <button @click="add">加法运算</button>
  </div>
</template>
<script>
export default {
  name: 'inner',
  computed:{
    getCount(){
      //通过this.$store.state获取状态对象
      return this.$store.state.count;
    }
  },
  methods:{
    add(state){
      //通过this.$store.commit方法触发状态变更
      this.$store.commit("increment")
    }
  }
}
</script>

//outer.vue组件：

<template>
    <div>
      外部值：{{getCount}}
      <button @click="sub">减法</button>
    </div>
</template>
<script>
  export default {
    name: "outer",
    computed:{
      getCount(){
        return this.$store.state.count;
      }
    },
    methods:{
      sub(){
        this.$store.commit("decrement")
      }
    }
  }
</script>

注意：虽然inner.vue和outer.vue是相互独立的，但是他们通过Vuex可以访问到相同的数据，达到了数据共享。

结果如图所示：点击'加法运算'或者'减法'，inner.vue和outer.vue的值是同步变化的。

3、Vuex之actions

(1)、在store/index.js设置actions：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 10
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAction(context) {
      context.commit("increment");
    },
    decrementAction(context) {
      context.commit("decrement");
    }
  }
});

（2）、更改inner.vue 和 outer.vue 的方法

//outer.vue组件

<template>
  <div>
    外部值：{{getCount}}
    <button @click="sub">减法</button>
  </div>
</template>
<script>
export default {
  name: "outer",
  computed: {
    getCount() {
      return this.$store.state.count;
    }
  },
  methods: {
    sub() {
     //这里的触发方法需要使用dispatch触发actions定义的方法。
     this.$store.dispatch("decrementAction");
    }
  }
};
</script>

//inner.vue

 <template>
  <div>
    内部值：{{getCount}}
    <button @click="add">加法运算</button>
  </div>
</template>
<script>
export default {
  name: "inner",
  computed: {
    getCount() {
      return this.$store.state.count;
    }
  },
  methods: {
    add(state) {
     //这里使用dispatch触发actions中定义的方法
     this.$store.dispatch("incrementAction");
    }
  }
};
</script>

注意：
Actions与mutation不同：
① Action 提交的是mutation，而不是直接变更状态。
② mutation不能操作异步行为,它只能改变本地数据；而 Action可以包含任意异步操作,比如进行网络请求数据操作。

4、Vuex之getter

注意：针对上面的数值，可以一直减到它变为负数，在有些情况下，数值要求不能为复制，这时候就需要用getter属性了。

(1)、在store/index.js中设置getter:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 10
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAction(context) {
      context.commit("increment");
    },
    decrementAction(context) {
      context.commit("decrement");
    }
  },
  getters: {
    getState(state) {
      return state.count > 0 ? state.count : 0;
    }
  }
});

(2)、inner.vue和outer.vue中获取值的方法做调整

//inner.vue

<template>
  <div>
    内部值：{{getCount}}
    <button @click="add">加法运算</button>
  </div>
</template>
<script>
export default {
  name: "inner",
  computed: {
    getCount() {
      //这里通过this.$store.getters中定义的方法getState获取值
      return this.$store.getters.getState;
    }
  },
  methods: {
    add(state) {
      this.$store.dispatch("incrementAction");
    }
  }
};

同理，outer.vue中也是同样的更改方式。