VueX的基本使用

概念：

Vuex其实就是一个为Vue.js设计的数据仓库，就是把各个组件公用的数据放到一个仓库里面进行统一的管理，这样既使得非父子组件间的数据共享变得简单明了，而且只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新。

• 其中有5个配置项

1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)，回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于：1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

1.安装

 npm i vuex@3 下载vue2的插件并引入

其中@3是代表vuex安装的版本，我们项目用的vue2的话推荐这个版本。

2.使用

• 在src文件夹下创建store文件夹，并在里面创建index.js文件，在里面引入vuex，并创建

  import Vue from "vue"
  import Vuex from "vuex"
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
    state: {
      sum: 0,
      str:"刘兰健"
    }, //存放数据
    actions: { //异步方法
    
    },
    mutations: {//修改state中数据的一些方法
   
    }, 
     getters:{ //计算属性
       newSum1(state){
         return state.sum*10
       },
       newSum2(state){
         return state.sum*20
       }
     }, 
    // modules：{},  store模块
  })
  
  export default store
  

• 在组件中获取vuex中的数据

  <script>
  export default {
    name: "App",
    data() {
      return {
        sv: 1,
      };
    },
    computed: {
      //获取vuex中state的数据
      sum(){
        return this.$store.state.sum
       },
       name(){
         return this.$store.state.str
       },
       
       //获取vuex中getters的值
        newSum1(){
         return this.$store.getters.newSum1
       },
       newSum2(){
         return this.$store.getters.newSum2
       },
    }
  };
  </script>
  

• 我们在组件中通过**Dispatch()**触发vuex中的action异步方法，中“add”为方法名，“this.sv”为数据

• 在vuex的action配置项中通过commit( )项mutation中提交获取到的数据并修改

  // 1
  methods: {
       add() {
          this.$store.dispatch("add",this.sv)
       },
    },
    
  

   // 2
   actions: { //异步方法
       add(context,value){
         context.commit("add",value)
       },
    },
  

   // 3
   mutations: {//修改state中数据的一些方法
      add(state,value){
        state.sum+=value
    }
  

  通过这个步骤就可以将在vue实例中修改的数据提交给vuex，然后vue实例重新获取最新的数据

3.vuex辅助函数

因为用原本的方式代码写出来后过于繁杂，所以我们用辅助函数来解决这个问题

引入辅助函数可以按需引入

1.mapState 辅助函数、mapActions 辅助函数

• 引入辅助函数

  import { mapState,mapActions,mapGetters,mapMutations  } from "vuex";
  

• 使用

  computed: {
      ...mapState({ sum: "sum", str: "str" }),
  
      // 方法一 key和value不一样
      // ...mapGetters({newSum1:"newSum1",newSum2:"newSum2"})
      // 方法二 key和value一样
      ...mapGetters(["newSum1", "newSum2"]),
    },
    methods: {
  // key和value一样写成数组可以简写
      ...mapMutations({ add: "add", del: "sub" }),
      ...mapActions({ addodd: "odd", setadd: "wait" }),
    },
  

4.模块化开发

• 模块化是为了解决协同开发时修改冲突的问题,还有就是都写在同一个仓库里代码太多了， 不利于阅读和修改。
• 如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。