Vuex的使用

一、Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex有五个核心概念：

1. state:是存储的基本数据。
2. mutations:提交更改数据。
3. getter:对state加工，和computed计算属性一样。
4. actions：处理异步，通过store.commit方法触发mutations中的方法，从而改变state值。
5. module：是store分割的模块，每个模块拥有自己的state、mutations、getters、actions。

二、如何使用Vuex？

1. 创建Vuex
   
2. 在state中定义需要存储状态名及初始值

export default new Vuex.Store({
  //数据仓库
  state: {
    nav:''
  },
  // 查询state
  getters: {
  },
  // 改变state中数据，触发页面组件渲染
  mutations: {
  },
  // 异步请求拿到数据，交给mutation存入state
  actions: {
  },
  // 模块细分
  modules: {
  }
})

从 store 实例中读取状态
方式1：最简单的方法就是在计算属性中返回某个状态：

<template>
  <div class="home">
    <span>{{$store.state.nav}}</span> //也可以直接获取
    <span>{{nav}}</span>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  computed:{
    nav(){
      return this.$store.state.nav
    }
  }
}
</script>

效果

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使mapState
方式2：使用 mapState 辅助函数帮助我们生成计算属性

<template>
  <div class="home">
    <p>写法1：{{count}}</p>
    <p>写法2：{{ countAlias }}</p>
    <p> 写法3：{{countPlusLocalState}}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeView',
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + 1
    }
  }),
  //以下为结构赋值写法，实现效果相同
  //computed: {
	//...mapState({countAlias:'count',count:"count",countPlusLocalState:state=>state.count + 1})
  //},
}
</script>

效果如下：

3. 在什么情况我们会使用Getter呢？从 store 中的 state 中派生出一些状态，多个组件需要用到此属性。

//store中getter代码
  getters: {
  	getNav:state=>state.nav
  },

<template>
  <div class="home">
    <span>{{$store.getters.getNav}}</span> //也可以直接获取
    <span>{{getNav2}}</span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'HomeView',
  computed:{
   ...mapGetters({
	  // 把 `getNav2` 映射为 `this.$store.getters.getNav`
	  getNav2: 'getNav'
	})
  }
}
</script>

4. 当我们想改变state状态时就可以使用Mutation，需要使用commit调用, mutation 必须是同步函数

export default new Vuex.Store({
  //数据仓库
  state: {
    count:0
  },
  // 查询state
  getters: {
  	getCount:state=>state.count
  },
  // 改变state中数据，触发页面组件渲染
  mutations: {
  	SETCOUNT(state,data){
      state.count = data
    },
  },
})

template>
  <div class="home">
    <button @click="commitCount">修改state中的count</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods:{
    commitCount(){
    	
    }
  },
}
</script>

5. Action的使用，类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

export default new Vuex.Store({
  //数据仓库
  state: {
    count:0
  },
  // 查询state
  getters: {
  	getCount:state=>state.count
  },
  // 改变state中数据，触发页面组件渲染
  mutations: {
  	SETCOUNT(state,data){
      state.count = data
    },
  },
  setCount({commit},data){
     // 通过commit触发mutations改变状态
     commit('SETCOUNT',data)
   },
})

template>
  <div class="home">
    <button @click="commitCount">dispatch触发actions</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods:{
    commitCount(){
    	this.$store.dispatch('setCount',10)
    }
  },
}
</script>

6. Module的使用
   Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

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

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

具体使用可参照Vux官方文档