Vuex基础知识

一、vuex基础语法

1.1简介

Vuex 是一个专为 Vue.js 应用程序开发的状态(数据)管理模式。

简单来说就是方便管理管理组件之间的数据共享，原来我们那种父传子、子传父、兄弟组件传值的方式在小型项目中还能应付过来，如果是项目比较复杂，还是建议使用vuex使用数据共享。

1.2基础使用步骤

vuex的使用步骤如下：

1. 安装vuex

npm install vuex --save

1. 导入vuex

import Vuex from 'vuex'
Vue.use(Vuex)

1. 创建store对象

state中就是全局共享的数据

const store=new Vuex.Store({
    state:{count:0;}
})

1. 把store对象挂载到vue实例中

new Vue({
    el:"#app",
    render:h=>h(app),
    router,
    store
})

备注
我们创建一个练习项目文件夹，注意配置的时候选择安装vuex即可，它会自动生成store文件夹,里面的index.js就是存储的核心文件。

1.3 state设置共享数据

• 组件中使用共享数据的语法1：

this.$store.state.数据变量名

• 组件中使用共享数据的语法2：

import {mapState} from 'vuex'  导入mapState函数

把全局state中的数据映射为当前组件的计算属性
computed:{
    ...mapState(['变量名'])
}

1.4 mutations定义修改数据方法

组件要修改数据建议用mutations

vuex中不建议子组件直接修改全局的store中的共享数据，所以我们要是想修改数据的时候建议使用mutations，便于统一管理。

mutations中定义处理逻辑的方法

export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    方法名(state) {
      //对于数据的处理逻辑
      
      //其中方法中的state形参就是上面的state共享数据对象;
    }
  },
  actions: {},
  modules: {}
});

组件中通过methods中的方法调用mutations中的方法

methods: {
      this.$store.commit('方法名')
  }

二、state代码示例

• 初始化一个测试项目demo1,注意安装vuex
• components中新建两个子组件Son1.vue和Son2.vue
• App.vue中引入两个子组件并注册

<template>
  <div id="app">
    <Son1></Son1>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from "./components/Son1.vue";
import Son2 from "./components/Son2.vue";

export default {
  name: "App",
  components: {
    Son1,
    Son2
  }
};
</script>

• store/index.js新建公共的数据模型

export default new Vuex.Store({
  state: {
    num: 0
  },
  。。。
});

• 方式1引入公共数据
  Son1.vue中使用num

<template>
  <div>
      子组件1
      <p>{{$store.state.num}}</p>

  </div>
</template>

• 方式2引入公共数据

<!-- 子组件1 -->
<template>
  <div>
      子组件1
      <p>{{num}}</p>

  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["num"])
  }
};
</script>

同理，Son2.vue也是如此使用。

三、mutations代码示例

3.1 mutations第一种使用方式

store/index.js中定义如下：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    addHandle(state) {
      state.num++;
    },
    addHandle2(state, arg) {
      state.num += arg;
    }
  },
  actions: {},
  modules: {}
});

Son1.vue中调用如下：

<!-- 子组件1 -->
<template>
  <div>
      子组件1
      <button @click="clickHandle">点击增加1</button>
      <button @click="clickHandle2">点击传递参数</button>
      <p>{{$store.state.num}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    clickHandle: function() {
      this.$store.commit("addHandle");
    },
    clickHandle2: function() {
      this.$store.commit("addHandle2", 2);
    }
  }
};
</script>

此时Son1.vue中点击按钮1，页面显示的数字就会增加1，点击按钮2，页面显示的数字就会增加2.

3.2 mutations第二种使用方式

store/index.js中定义如下：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    addHandle(state) {
      state.num++;
    },
    addHandle2(state, arg) {
      state.num += arg;
    }
  },
  actions: {},
  modules: {}
});

Son1.vue中调用如下：

<!-- 子组件1 -->
<template>
  <div>
      子组件1
      <button @click="clickHandle">点击增加1</button>
      <button @click="clickHandle2">点击传递参数</button>
      <p>{{$store.state.num}}</p>
      <!-- <p>{{num}}</p>  -->

  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["addHandle", "addHandle2"]),
    clickHandle: function() {
      this.addHandle();
    },
    clickHandle2: function() {
      this.addHandle2(2);
    }
  }
};
</script>