Vuex快速入门

Vuex

1. state

• 在state中定义的数据，在组件直接使用

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

Vue.use(Vuex);

export default new Vuex.Store({
  // state相当于组件中的data，专门用来存放全局的数据
  state: {
    num: 123
  },
  // getters相当于组件中的computed，getters是全局的，computed是组件内部使用的。
  getters: {},
  actions: {},
  mutations: {},
  modules: {}
});

获取state中数据的方式

在html中获取state中的num数据

<template>
    <div>
        <p>Number: {{$store.state.num}}</p>
    </div>
</template>

在js中获取state中的num数据

  this.$store.state.num;

使用辅助函数获取state的num数据

   <template>
      <div>
        <p>Number：{{num2}}</p>
      </div>
    </template>
   <script>
      improt { mapState } from 'vuex'
      export default {
         computed() {
            ...mapState(['num2'])
          }
      }
  </script>

2. getter

• 将组件中统一的computed都放到getter中来操作

  export default new Vuex.Store({
      // state相当于组件中的data，专门用来存放全局的数据
      state: {
        num: 123
      },
      // getters相当于组件中的computed，getters是全局的，computed是组件内部使用的。
      getters: {
        getNumber(state) {
          return state.num
        }
      },
      actions: {},
      mutations: {},
      modules: {}
    })

• 使在html中用全局中的computed

   <template>
      <div>
        <p>Number:{{$store.getter.num}}</p>
      </div>
   </template>

• 使在js中用全局中的computed，辅助函数方式

  <template>
    <div>
      <p>Number：{{getNumber}}</p>
    </div>
  </template>

import { mapGetter } from "vuex"
export default {
  computed: {
    ...mapGetter(['getNumber'])
  }
}

3. mutation

• 更改Vuex的store中的状态的唯一方法是提交 mutation。(不能异步操作)

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

  Vue.use(Vuex);

  export default new Vuex.Store({
    // state相当于组件中的data，专门用来存放全局的数据
    state: {
      num: 123
    },
    // getters相当于组件中的computed，getters是全局的，computed是组件内部使用的。
    getters: {},
    actions: {},
    mutations: {
      // 让num累加
      increase(state, payload) {
        // payload 是一个形参，如果组件在commit时，有参数传进来就存在，如果没有传过来就是undefined
      }
    },
    modules: {}
  });

4. actions

• actions是store中专门用来处理异步的，实际修改状态值的，还是mutations

  export default new Vuex.Store({
    state: { num: 123 },
    // actions是store中专门用来处理异步的，实际修改状态值的，还是mutations
    actions: {
      decreaseAsync(context) {
        context.commit('decrease');
      }
    },
    mutations: {
      decrease(state) {
        state.num--;
      }
    }
  })

5. 辅助函数map*

• mapState和mapGetter在组件中都是写在computed里面

import { mapState, mapGetter } from 'vuex'
export default {
  computed: {
    ...mapState(['num']),
    ...mapGetter(['getNum2'])
  }
}

• mapMutations和mapActions在组件中都是写在methods里面

export default new Vuex.Store({
  state: { num: 1},
  actions: {
    descreaseAsync(context) {
      setTimeout(()=> {
        context.commit('descrease')
      }, 1000)
    }
  },
  mutations: {
    descrease(state) {
      state.num--;
    }
  }
})

<template>
  <div>
    <button @click="decrease()">点击-1</button>
    <button @click="decreaseAsync()">点击延迟-1</button>
  </div>
</template>

import { mapMutations, mapActions } from "vuex"
export default {
  ...mapMutations(['decrease']),
  ...mapActions(['decreaseAsync'])
}

6. 拆分写法

• store中所有属性，都可以拆分为单独的js文件来书写

7. modules

• 我们的store可以认为是一个主模块，他下边可以分解为很多个子模块，子模块都可以单独领写出来，写完在导入到主模块中。下面以users子模块举例

user子模块举例

• users模块也可以拥有 state、getter、mutations和actions
• 所有的方法和属性，该怎么写就怎么写。但users的index.js文件中，需要写入 namespaced: true命名空间。
• 然后在store的index.js中引入到modules中。

// users/index.js
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default {
    namespaced: true, // 开启命名空间
    state,
    getters,
    actions,
    mutations
}

import users from './users'
export default new Vuex.Store({
  state: {},
  actions: {},
  getters: {},
  mutations: {},
  modules: {
    users
  }
})

• 在组件中获取值的方法：$store.state.users.属性
• 在组件中触发mutations的方法

import { mapMutations } from 'vuex'
methods: {
  ...mapMutations({
    changeNickName: 'users/changeNickName'
  })
}