vuex小白入门

摘抄自：https://www.dazhuanlan.com/2019/12/07/5dea91621b037/

 

---

 

首先：Vuex是什么？

有关于Vuex，官网是这样定义的：Vuex 是一个专为 Vue.js 应用进程开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我是这么认为的：Vuex是为了解决多个组件共享状态而存在的。他能够有效的解决兄弟组件，父子组件，爷孙组件的传值。他将组件的共享状态抽取出来，以一个全局单例模式管理。

Vuex有以下5个重要属性：

1、State
　　单一状态树，每个应用将仅仅包含一个 store 实例。
2、Getter
　　可以认为是 store 的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
3、Mutation
　　更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
4、Action
　　类似于 mutation，在于Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作
5、Module
　　Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

 

一、不使用Module开发

1、文档存放

　　

└── store
　　├── index.js 　　　　# 我们组装模块并导出 store 的地方
　　├── state.js 　　　　 # 跟级别的 state
　　├── getters.js　　　   # 跟级别的 getter
　　└── mutations.js 　　 # 根级别的 mutation

 2、index.js存放的内容

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';

vue.use(vuex);

export default new vuex.Store({
  state,
  getters,
  mutations
});

3、state.js存放的内容

const state = {
  name: 'jwl',
  age: 24
};

export default state;

 4、getters.js存放的内容

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

 5、mutations.js存放的内容

export default {
    SET_NAME(state, name) {
        state.name = name;
    },
    SET_AGE(state, age) {
        state.age = age;
    }
};

 6、main.js存放的内容

import App from './App.vue';
import Vue from 'vue';
import router from './router/index.js'
import vuex from 'vuex'
import store from './store'

Vue.use(vuex);

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

 7、在组件中使用

<template>
  <div>
    姓名 {{name}} 
    <br>
    年龄 {{age}}
    <br>
    {{other}}
    <input @click="changeName" type="button" value='改变名字'>
  </div>
</template>
 
<script>
import { mapGetters, mapMutations ,mapState} from "vuex";

export default {
  components: {},
  computed: {
    ...mapGetters(["name", "age", "other"])
    
    //也可以用这个，但mapGetters要强大
    //...mapState(["name", "age", "other"])
  },
  created() {},
  methods: {
    ...mapMutations({
      setName: "SET_NAME",
      setAge: "SET_AGE"
    }),
    changeName() {
      this.setName("jiawan");
    }
  }
};
</script>

二、使用Module开发

 1、文档存放

　　

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules
        ├── demo1.js      # 模块1
        └── demo2.js      # 模块2

 2、index.js存放的内容

import vue from 'vue';
import vuex from 'vuex';
import demo1 from './modules/demo1.js';

vue.use(vuex);

export default new vuex.Store({
  modules: {
    demo1
  }
});

3、demo1.js存放的内容

const demo1 = {
  state: {
    names: `demo1`
  },
  mutations: {
    change2(state, va) {
      state.names = va.new;
    }
  },
  getters: {
    names(state, getters, rootState) {
      return state.names + 'hhhhh'
    }
  }
}
export default demo1;

 4、main.js存放的内容不变

 5、在组件中使用

<template>
  <div>
    <br>
    //state内容，也可以在计算属性里面
    {{$store.state.demo1.names}}
    <br> 
    {{demo1name}} 
    <input @click="changeDemo1Name" type="button" value='改变demo1名字'>
  </div>
</template>
 
<script>
export default {
  components: {
  },
  computed: {
    //getters内容
    demo1name() {
      return this.$store.getters.names;
    }
  },
  created() {},
  methods: {
    changeDemo1Name() {
      this.$store.commit("change2", {
        new: "修改了修改了..."
      });
    }
  }
};
</script>