导入vuex，在store的index.js创建store对象
在main.js挂载store
import store from './store'
new Vue ({
/* 将store对象实例挂载到vue实例中
所有组件就可以直接从store中获取全局数据了*/
store,
render: h => h(App)
}).$mount('#app')在store中的index.js进行声明state
/* 创建store对象并导出 */
export default new Vuex.Store({
// 状态--数据
state: {
/* state 中存放的就是全局共享的数据 */
count: 0
}
})使用state数据
方法1：直接获取$store.state.数据名称
<div>
<!-- 组件访问 State 中数据的第一种方式：
this.$store.state.全局数据名称 -->
<h3>当前最新的count值为：{{$store.state.count}}</h3>
<button>+1</button>
</div>方法2：mapState辅助函数
- 从 vuex 中按需导入 mapState 函数
- 在计算属性节点computed下映射 ...mapState(['count'])
Mutation（修改state数据的唯一方法）
不可以直接操作 Store 中的数据，可以集中监控所有数据的变。
在组件内触发mutation
方法一 commit函数，可以传参
- 无参：this.$store.commit('add', )
- 有参：this.$store.commit('addN', 3)
第二种方式（mapMutations辅助函数,可以传参）
- 先导入mapMutation函数，
- 再在methods中使用 ...mapMutations(['sub', 'subN']),
- 在click绑定的事件直接调用sub和传参的sub（5）
Action（作用是操作mutations异步请求）
异步操作变更数据，必须通过 Action，不能使用 Mutation，但在 Action 中要通过触发 Mutation 的方式间接变更数据。
1.定义actions：
在action中，不能直接修改state中的数据，必须从context.commit()触发某个mutation才行
context是个对象
2.触发actions分发
方法一dispatch函数，可以传参
无参： this.$store.dispatch('addAsync')
有参：this.$store.dispatch('addNAsync', 5)
dispatch函数专门触发actions的方法。
方法二mapActions辅助函数，可以传参
先导入mapActions函数，
再在methods中使用 ...mapActions(['subASync', 'subNASync'])
在click绑定的事件直接调用subASync和传参的subNASync(9)
Getter （类似于计算属性，不改变state值只加工）
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
② Store 中数据发生变化，Getter 的数据也会跟着变化。
1.使用getters
方法一
直接使用this.$store.getters.名称
方法二
mapGetters辅助函数
- 从 vuex 中按需导入mapGetters函数
- 在计算属性节点computed下映射 ...mapGetters(['showNum']
module（模块化）
把 Vuex 相关代码分割到模块中,将 store 分割成模块（module）,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块.