vuex使用流程(marksheng珍藏——前端必备)

た入场券 2022-11-13 04:16 165阅读 0赞

[https://blog.csdn.net/weixin\_34355559/article/details/92094243?utm\_medium=distribute.pc\_relevant.none-task-blog-baidujs\_baidulandingword-0&spm=1001.2101.3001.4242][https_blog.csdn.net_weixin_34355559_article_details_92094243_utm_medium_distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0_spm_1001.2101.3001.4242]  
使用流程  
1.安装vuex

npm install vuex --save；  
1  
2.store文件中引入vuex  
为了方便全局使用，一般会新建一个store文件夹，用于存放相关状态值。文件夹下的index.js作为对外输入接口的主文件。在主文件中引入vuex,并输出store接口。  
index.js:

import Vue from 'vue'；  
import Vuex from 'vuex'；  
export default store;；  
  
3.vuex使用  
index.js：

Vue.use(Vuex)  
  
4.在全局引用vuex文件  
main.js:

import store from './store/index'  
  
5.实例化vue对象时加入store对象  
main.js:

new Vue(\{  
  el: '\#app',  
  router,  
  store, //使用store  
  template: '<App/>',  
  components: \{ App \}  
\})  
  
读取状态值(3种方式）  
1.通过 computed 的计算属性直接赋值(compyted计算属性相当于给data复制，所以也可以直接\{ \{\}\}取值）  
a.vue(调用模板):

computed: \{  
  count() \{  
    return this.$store.state.count;  
  \}  
\}  
  
或者

<p>\{ \{this.store.state.count\}\}</p>  
1  
2.通过mapState对象赋值  
a.vue（调用模板）：  
首先引入mapState:

import \{ mapState \} from 'vuex'  
1  
然后通过mapState展开为对象赋值

computed: mapState(\{  
  count: state => state.count  //传入state,返回state.count  
  // 大概就是 count = state.count  
\})  
  
3.通过 mapState 的数组来赋值(一般赋值的属性值和状态值一样时使用）开发中一般都一样，所以这个方式使用比较多，此方式不用将每个状态值都在计算属性中赋值一次或者展开为多个对象赋值，相比起前两个方式更为简便快捷。

computed: mapState(\["count"\])  
1  
改变状态值  
mutation（同步）  
1.先在store中定义：  
store.js

const mutations = \{  
  add(state) \{  
    state.count += 1  
  \},  
  reduce(state) \{  
    state.count += 1  
  \}  
\}  
  
2.commit调用触发mutation中的方法  
直接在事件中调用  
a.vue(调用模板）：

<div>  
  <button @click="$store.commit('add')">+</button>  
  <button @click="$store.commit('reduce')">-</button>  
</div>  
  
这里最简单的运用方式是直接传递一个方法名commit调用改变状态值的方法。但实际开发中，常常需要在修改值时传递参数，以进行参数值不同的修改，此时也是通过commit传递，只是要多额外带上参数传递。  
store.js(给方法加上参数):

const mutation = \{  
  add(state, n) \{  
    state.count += n  
  \},  
  reduce(state) \{  
    state.count -= 1  
  \}  
\}  
  
修改时间的调用触发里带上参数。  
a.vue(调用模板）：

调用模板方法的方式获取mutation  
实际开发中，在模板结构中时间触发commit调用mutation稍显麻烦，这里我们可以使用mapMutation工具函数将mutation中改变状态值的方法直接映射成模板的方法。  
1.首先在模板文件中引入mapMutations工具函数  
a.vue(模板文件）：

import \{mapState,mapMutations\} from 'vuex  
1  
2.模板methods中映射定义方法  
a.vue:

methods: mapMutaions(\[  
  'add', 'reduce'  
\])  
  
这里，模板里可以像调用自己的方法一样调用mutation中修改状态值的方法。  
a.vue:

<button @click="reduce">-</button>  
1  
actions(异步）  
和Mutation一样，差别只是异步修改。想要异步修改，其实相当于mutation定义完之后，异步commit调用mutation里的修改发方法。

const store = new Vuex.Store(\{  
  state: \{  
    count: 0  
  \},  
  mutations: \{  
    increment (state) \{  
      state.count++  
    \}  
  \},  
  actions: \{  
    increment (context) \{  
     setTimeout(() => \{  context.commit('increment')\}, 3000)  
    \}  
    //或者\{commit\}对象调用：  
    increment(\{commit\})\{  
         setTimeout(() => \{ commit('increment')\}, 3000)  
  \}  
  //  
\})  
  
actions调用对象有两种，直接调用和context.  
整个action函数中，方法必须传递参数：调用对象（\{commit\}）或者（content），commit传递的是调用的mutation里定义的改变状态值的方法名，注意是commit（‘方法名’’），不是commit（方法名)方法名作为参数传递时，需要加引号，用字符串的形式传递

context：上下文对象，这里你可以理解成 store 本身  
｛commit \} ：直接把 commit 对象传递过来，可以让方法体逻辑和代码更清晰明了。

const actions = \{  
  addAction(context) \{  
    context.commit('add', 10)  
  \},  
  reduceAction(\{commit\}) \{  
    commit('reduce')  
  \}  
\}  
  
调用模板方法的方式获取actions(和mutation本质相同）  
1.首先在模板文件中引入mapActions工具函数，用于是异步调用mutation，mutation是修改state.所以一般都要同步引用mapState和mapActions:

import \{ mapState, mapMutations, mapActions\} from 'vuex'

2.模板methods中映射定义方法  
a.vue:

methods: \{  
  ...mapMutations(\[  
    'add','reduce'  
  \]),  
  ...mapActions(\['addAction','reduceAction'\])  
\}

这里，模板里可以像调用自己的方法一样调用actions中修改状态值的方法。  
a.vue:

<p>  
  <button @click="addAction">+</button>  
  <button @click="reduceAction">-</button>  
</p>  
  
getters计算过滤(和state本质一样，只是是二次计算或过滤属性，所以使用和调用方式都一样)  
有时候对于store中的状态值不是直接使用，需要二次计算或者过滤，此时就需要一个store的计算属性：getters,  
store的主入口文件，这里一般是store文件夹下的index.js:

const getters = \{  
  count: function(state) \{  
    return state.count += 100  
  \}  
\}  
  
和state、mutation一样定义之后还需要引入才能使用。  
index.js:

export default new Vuex.Store(\{  
  state,mutations,getters  
\})  
  
store中配置好，想要使用，还需在引用模板中获取。和state获取一样，一般在computed中配置。和state读取数据一样，getters只是先同步修改了状态值，然后读取。

computed: \{   
  count() \{  
    return this.$store.getters.count  
  \}  
\}  
  
和state同理，每个状态值的修改都映射成一个方法对象的话有些复杂，所以也可以使用mapGetters将状态值展开赋值。  
引入：

import \{ mapGetters \} from 'vuex'  
1  
computed属性中添加.mapGetters展开赋值之后，相当于同名方法，所以想要获取值，必须同名获取。

computed: \{   
  ...mapGetters(\["count","num"\])  
  //等价于：  
  count() \{  
      return this.$store.getters.count  
 \},  
 num() \{  
     return this.$store.getters.num  
 \}  
  //  
  \}  
  
总体来讲，state、getters、mutation、action都是先在store的js文件中定义，并export输出接口，再在需要调用的vue模板中获取值。state和getters静态获取状态值，所以在computed计算属性中获取，而mutationhe 和action是改变状态值，属于动态方法，所以在methods中赋值为方法。

module 模块组  
当项目复杂庞大时，一个store文件管理并不理想。此时，我们可以将状态值分组，运用module：状态管理器的模块组操作。  
每个模块的值分别定义，然后在Vuex.Store中命名输出。通过this.$store.state.a.属性名获得数据。

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

const moduleB = \{  
  state: \{ ... \},  
  mutations: \{ ... \},  
  actions: \{ ... \}  
\}

const store = new Vuex.Store(\{  
  modules: \{  
    a: moduleA,  
    b: moduleB  
  \}  
\})  
  
a.vue(调用模板）

<h3> \{ \{ $store.state.a.count \}\}</h3>  
1  
或者：

computed: \{  
  count() \{  
    return this.$store.state.a.count  
  \}  
\}  
  
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

[https_blog.csdn.net_weixin_34355559_article_details_92094243_utm_medium_distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0_spm_1001.2101.3001.4242]: https://blog.csdn.net/weixin_34355559/article/details/92094243?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242