vuex

今天尝试使用vuex，把自己的实践经验记录下来，方便今后查阅，主要内容还是在官方文档中，感兴趣的朋友可以去研究研究

安装

npm install vuex --save

项目目录

创建store

安装完vuex之后就是创建store，将vue中的state放到vuex中的store中统一管理，在store文件夹中创建index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    count:0
}

const mutations = {
    increment(state){
        state.count++
    },
    decrement(state){
        state.count--
    }
}

const actions = {
    increment({commit}){
        commit('increment')
    },
    decrement({commit}){
        commit('decrement')
    }
}

const store = new Vuex.Store({state,mutations,actions})
export default store

看文件内容：
1、首页文件引入vue和vuex，然后调用Vue.use(Vuex)方法，将vuex加入到vue框架中
2、创建变量state，这个state中定义了vuex需要管理的状态
3、mutations，这个类似于react中的reducers，主要是‘状态修改逻辑’和‘修改动作名称’的映射关系
到这里其实就已经创建一个可使用的vuex了，可以在组件中调用this.$store.state.count获取状态，也可以使用this.$store.dispath()方法修改状态，但是只能完成同步操作
如果想在操作状态时加入异步操作，例如ajax，则需要加入action，action中可以写入异步操作
4、actions动作声明，可在action中调用mutations中的修改动作，可在action中写异步操作
5、调用new Vuex.Store()方法生成实例并导出

把store注入vue框架

import Vue from 'vue'
import router from './router/router'
import store from './store'
import App from './pages/App.vue'

Vue.config.productionTip = false

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

在main.js中导入store，在new Vue()中引入store，这样vue下的所有组件都被注入了vuex，所有组件都可以通过this.$store.state.count的方式获取状态或调用this.$store.dispatch('increment')修改状态

在组件中使用vuex

<template>
  <div id="app">
    <img alt="Vue logo" src="../assets/logo.png">
    <div>vuex数据count：{{ $store.state.count }}</div>
    <HelloWorld @changeAgeDec="changeAgeDec" @changeAge="changeAge" :age="age" :name="name" msg="Welcome to Your Vue.js App"/>
    <router-link class="link" to="pagea">跳转到pagea</router-link>
    <router-link class="link" to="pageb">跳转到pageb</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import HelloWorld from '../components/HelloWorld.vue'
export default {
  name: 'app',
  data(){
    return {
      name:"liuhao",
      age:29
    }
  },
  methods:{
    ...mapActions({
      increment:"increment", //将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      decrement:"decrement"
    }),
    changeAge(){
      this.age++
      this.increment()
    },
    changeAgeDec(){
      this.age--
      this.decrement()
    }
  },
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.link{
  margin: 0 10px
}
</style>

可以在组件中使用this.$store来使用vuex，获取值用this.$store.state.count,修改值则调用this.$store.dispatch('increment')
但是vuex为开发人员提供了第二种方式，就是mapState和mapActions的方式，这两个方法类似于react-redux中connect方法中的mapStateToProps和mapDispatchToProps，都是讲store中的状态和dispatch映射到组件中，简化使用方式。
上面的代码中使用了mapActions之后在组件中就可以用this.decrement()来替代this.$store.dispatch('increment')

使用module

vuex的Vuex.Store接受参数module

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

在使用mapActions做映射是

export default {
  name: 'app',
  data(){
    return {
      name:"liuhao",
      age:29
    }
  },
  methods:{
    ...mapActions("a",{
      increment:"increment", //将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      decrement:"decrement"
    }),
    changeAge(){
      this.age++
      this.increment()
    },
    changeAgeDec(){
      this.age--
      this.decrement()
    }
  },
  components: {
    HelloWorld
  }
}

vuex是状态管理解决方案，可以有效简化组件中状态传递的方式，有什么需要补充的希望大家给出建议