vuex的基本结构

Vuex基本结构

State中的数据 -render-> 渲染到组件上 -进行操作 dispatch-> action -commit-> mutation -mutate-> state

如果使用Vuex，代码量会更多，代码逻辑会更加清晰

state （状态）

state中保存了数据，可以放在各个组件中的数据，组件想要获取到数据，有两种方式

1. 直接使用

{{$store.state.state属性名}}

2. 利用计算属性

getters (从state中获取新数据)

getter的作用可以从state中动态获取数据，当state数据改变时，对应的getter也一样会改变。getter中有两个参数，一个是state，第二个是getter

const store = new Vuex.Store({
  state: {

  },
  getters: {
    getter (state, getter) {
      // 根据相关操作获取state以及其他getter中的数据
    },
    getterFn (state) {
      // 返回一个函数体
      return function (参数) {
        // 返回数据
        return 相关操作的到的数据
      }
    }
  }
})

1. 直接使用

{{$store.getters.getter名字}}

2. 利用计算属性

mutations

mutation只做纯粹的state数据修改操作，mutation需要被提交（commit）才能执行

一般情况，state对应的都有mutation，有些不止一个

const store = new Vuex.Store({
  state: {

  },
  mutations: {
    mutation (state, payload) {
      // 因为mutation是对state操作，所以有state属性，在commit时，可以提交数据，所以payload就是commit时提交的数据，可以是任意名字
    }
  }
})

在组件中 'commit' mutation (不是很符合规范)

export default {
  methods: {
    clickHandler () {
      this.$store.commit('mutation名字', '数据')
    }
  }
}

actions

action可以进行异步请求，将数据commit给mutation。action中还可以进行数据处理，将数据处理成mutation可以直接使用的数据

const store = new Vuex.Store({
  state: {
    msg: "消息"
  },
  mutations: {
    setMsg (state, msg) {
      state.msg = msg
    }
  },
  actions: {  
    getMsg (context, payload) {
      // 根据相关的数据传递，将获取到payload发送给mutation
      context.commit('setMsg', payload)
    }, 
    getMsg ({commit}, payload) {
      commit('setMsg', payload)
    }
  }
})

在组件中 'dispatch' action

export default {
  methods: {
    clickHandler () {
      this.$store.dispatch('action名字')
    }
  }
}

获取到action异步是否执行完成

我们只需要在对应的action中return一个promise对象 （action执行结束后就是一个promise对象，有.then方法）

{
  actions: {
    async action名字 () {
      // return axios请求
      try {
        const res = await axios() 
        对结果进行处理
      } catch (err) {

      }
    }
  }
}

在vue-cli中使用Vuex

1. 在创建项目时选择Vuex组件即可

2. 自己创建环境

1. 创建一个项目
2. 安装Vuex npm i --save vuex / yarn add vuex
3. 在项目中src里新建文件夹store/index.js
4. 在index.js中写以下内容

// 1 引入Vue及Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2 调用Vue.use
Vue.use(Vuex)

// 3 创建Store的实例
const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

// 4 将store作为模块导出
export default store

5. 在main.js中引入store

import store from './store/index'

new Vue({
  store
})