nuxt.js中使用数据源

一、在store文件夹中定义js文件。

js文件书写步骤：

• 1.定义state数据

  const state= () => ({
        数据1：'',
        数据2：''
    })
  
  

• 2.定义mutations

  mutations中定义方法的直接改变state的数据
  

  const mutations = {
       方法2(state，参数2){//此处state不可少
           state.数据1=参数2;
       },
       方法3(state，参数3){//此处state不可少
          state.数据2=参数3;
       }
   }
  

• 3.定义actions

  actions中定义方法对数据进行预处理或进行异步请求，通过commit将方法名和参数给mutations,mutations中定义这个方法对state数据进行更改。
  

    const actions = {
        方法1(state,参数1){//此处state不可少
        
            /**
             * 数据处理逻辑代码
             * */
             
             state.commit("方法2",参数2);
        }
     
    }
  

• 4.定义getters,

  相当于store的计算属性,对state数据进行操作（如过滤等）
  

  const getters = {
  
   }
  

• 5.抛出

  export default {
    state,
    mutations,
    actions,
    getters
  }
  
  

二、store文件的使用。

• 1.在页面中引入mapState,前提是配置了vuex

  import { mapState } from 'vuex';
  

• 2.语法糖形式注入数据源

  computed:{
  这是定义在store文件夹中index.js文件里的state数据,直接引入state数据
    ...mapState(['数据']),
  
  这是定义在store文件夹下的js文件，需要加一个文件名引入
    ...mapState('store文件夹下js文件名',['该文件数据']),
   
  },
  

• 3.在页面注入数据源后页面中可以直接将state数据以data数据访问形式访问，
• 4.如果没有在页面注入数据源，则通过 this.$store.state.文件名.state数据 形式访问

三、store文件state数据的更改

• 如果不需要actions处理则直接调用mutations中的方法。使用commit字段。

  this.$store.commit("文件名/方法名",参数);
  

• 如果需要actions处理则调用actions方法，使用dispatch字段

  this.$store.dispatch('文件名/方法名',参数')