一、vue-cli集成VueX组件
使用vue-cli来创建vue项目：vue create 项目名
其中store被注册到main.js中。
main.js： import { createApp } from 'vue' import App from './App.vue' import router from './router' // 引入store import store from './store' // use(store)：使用store createApp(App).use(store).use(router).mount('#app')
二、VueX基本使用(拿、修改)
2.1、store定义、取值以及修改值
store定义与组件取值
核心：定义值在state对象中定义；组件中取全局store值使用this.$store.state.xxx。
store/index.js：定义一个值
import { createStore } from 'vuex' export default createStore({ // 全局数据对象（值存储在state中） state: { name: "changlu" }, //同步方法，最终修改全局对象数据 mutations: { }, //可编写异步方法，写一些相关逻辑，调用mutations中的方法执行 actions: { }, //modules：更复杂的对store进行局部拆分。 modules: { } })
任意组件：
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <h1>store.name=>{{ myname }}</h1> </div> </template> <script> export default { name: "Home", components: {}, // 计算属性 computed: { myname() { return this.$store.state.name; //取值操作，通过this.$store.state.xxx取值 }, }, }; </script>
组件修改值
组件方法触发 (dispatch)-> 指派store的actions执行方法 (commit)-> 提交至mutations执行(修改全局值)
xxx.vue：组件
<button @click="modName('liner')">修改store.name=>liner</button> <script> export default { name: "Home", components: {}, methods: { modName(str) { // 1、指派state.action中的方法执行 this.$store.dispatch("change", str); }, }, }; </script>
store/index.js：定义store中action以及mutation方法
import { createStore } from 'vuex' export default createStore({ // 全局数据对象（值存储在state中） state: { name: "changlu" }, //最终修改值位置(同步方法) mutations: { // 参数说明state=>store.state ， str=>调用change时传递的参数 //3、最终在mutations理进行同步修改值 change(state, str) { state.name = str; //修改name } }, // 组件指派行为，在这里可以使用异步方法(如定时器、延时器等等) actions: { // 2、执行commit操作提交至mutations执行 change(store, str) { store.commit("change", str); //调用mutations的change方法执行 } }, modules: { } })
为什么需要使用dipatch进行先指派操作呢？我可以直接去commit执行mutations里修改值的方法吗？
答案：可以的，直接修改组件中的dispath为commit操作：
methods: { modName(str) { // 组件中的方法直接来commit提交让store里的mutations方法执行 this.$store.commit("change", str); }, }
效果同上也是可以直接进行修改的，至于为什么要走上面的流程，核心就是在于mutations中只能进行同步方法操作(专注于修改state全局值)，actions里可以进行异步操作(可以写一些相关逻辑操作等)。
注：其实你在muations方法中调用异步方法也是可以执行的，但是我们还是应该遵守对应的方法职能，将一些异步操作写在actions中！
2.2、关于mutations与actions的详细区别
参考：vuex中mutation和action的详细区别
1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。
3、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。
