只适合新手，一方面记录下来加深记忆，一方面希望能帮到和我一样的新手
本篇主要参考文章：juejin.cn/post/684490…
还有一个大佬写的适合新手学习：segmentfault.com/a/119000000…
实际开发应用中经常会遇到这么一个场景：翻页翻到了第三页，点进某一条查看详情，返回后又回到了第一页？？！对于这个问题，一开始我并不知道怎么解决（毕竟初入门小白），询问了某大佬之后，他告诉了我可以使用 vuex ，为了达到这个目标，开始学习。
初级入门
一 安装vuex
npm install vuex --save
二 vuex 的 mutations 和 state
这个可以下载main.js文件中，但是为了后期方便，建议新建一个文件夹
位置：src/store/index.js
// 引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 使用
export default new Vuex.Store({
state: {
name: 'oldName'
},
mutations: {
updateName(state){
state.name = 'newName' // 更改state的值
}
}
})
然后前往main.js注册vuex 位置： src/main.js
import store from './store'
new Vue({
……
store, // 使用 store
……
})
三 使用vuex
已经可以进行最基本的使用了，自己在src里面新建一个文件，我的代码在位置 src/pages/other/vuexText/Simple.vue 这是最简单的应用了，state就相当于vue里面的date，mutations就是vue里面的methods，不过要通过$store.commit()使用
<template>
<div>
{{$store.state.name}}
<el-button @click="$store.commit('updateName')">更名</el-button>
</div>
</template>
<script>
export default {
};
</script>
<style lang="less">
</style>
看到效果 初始值oldName
四 vuex 的 getters
vuex中的getters相当于vue的计算方法，用来对state进行自定义改变 在store.js中添加代码，位置：src/store/index.js
// 引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 使用
export default new Vuex.Store({
state: {
name: 'oldName'
},
mutations: {
updateName(state){
state.name = 'newName' // 更改state的值
}
},
// 新增的代码 ———— 新增getters方法
getters: {
getReverseName(state) {
return state.name.split('').reverse().join('')
}
}
})
然后在代码中使用getters,位置：src/pages/other/vuexText/Simple.vue
<template>
<div>
{{$store.state.name}}
<!-- 新增 getters 使用 -->
{{$store.getters.getReverseName}}
<el-button @click="$store.commit('updateName')">更名</el-button>
</div>
</template>
看到效果
点击前
五 vuex 的 actions
显而易见，多个state的时候，用mutations来触发比较干净和好维护，那多个mutations的时候，就需要用到actions了 位置：src/store/index.js
// 引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 使用
export default new Vuex.Store({
state: {
name: 'oldName'
},
mutations: {
updateName(state){
state.name = 'newName' // 更改state的值
}
},
getters: {
getReverseName(state) {
return state.name.split('').reverse().join('')
}
},
// 新增的代码 ———— 新增使用actions
actions: {
updateNameAction:({commit}){
commit('updateName')
}
}
})
使用actions，actions 用 dispatch
位置：src/pages/other/vuexText/Simple.vue
<template>
<div>
{{$store.state.name}}
{{$store.getters.getReverseName}}
<el-button @click="$store.commit('updateName')">更名</el-button>
<!-- 新增 actions 使用 -->
<el-button @click="$store.dispatch('updateNameAction')">更名2</el-button>
</div>
</template>
点击 actions方法前
可以看到，调用了actions里面的方法
六 modules 模块化
在项目越来越大，使用到store的也越来越多，我们就需要将store进行模块化处理，不同的功能拥有单独的store文件夹，这样对于后期维护才更方便 新建一个module文件夹，下面用来存档不同的store module的文件 位置：src/store/modules/simple.js
export default {
state: {
name: 'oldName'
},
getters: {
getReverseName(state) {
return state.name.split('').reverse().join('')
}
},
mutations: {
updateName(state) {
state.name = 'newName'
}
},
actions: {
updateNameAction({
commit
}) {
commit('updateName')
}
}
}
相应的store.js里面进行更改，位置：src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import simpleMudule from './modules/simple'
export default new Vuex.Store({
modules: {
simpleMudule //也可以重命名
}
})
使用store，位置src/pages/other/vuexText/Simple.vue
<template>
<div class="simple-contain">
<!-- 注意这里state取的是simpleMudule里面的那么 -->
{{$store.state.simpleMudule.name}}
{{$store.getters.getReverseName}}
<el-button @click="$store.commit('updateName')">更名</el-button>
<el-button @click="$store.dispatch('updateNameAction')">更名2</el-button>
</div>
</template>
运行代码效果和之前一样
注
vue官方文档提示：
由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
所以建以使用的时候用在computed和methods中，以上代码是为了便于入门学习，省去了代码量
