JavaEE-Nuxt中的vuex

Nuxt中的vuex

• 参考：https://v2.nuxt.com/docs/directory-structure/store

3.1 根模块数据操作

• 步骤一：创建 store/index.js 添加一个 counter变量，并可以继续累加操作

  export const state = () => ({
    counter: 0
  })
  
  export const mutations = {
    increment (state) {
      state.counter++
    }
  }

• 步骤二：在页面中，使用

  <template>
    <div>
      首页 {{counter}}
      <input type="button" value="+" @click="increment"/>
    </div>
  </template>
  
  <script>
  import { mapState,mapMutations } from 'vuex'
  export default {
    computed: {
      ...mapState(['counter'])
    },
    methods: {
      ...mapMutations(['increment'])
    },
  }
  </script>
  
  <style>
  
  </style>

3.2 其他模块数据操作

• 步骤一：创建其他模块 store/book.js

  export const state = () => ({
    money: 0
  })
  
  export const mutations = {
    addmoney (state) {
      state.money += 5
    }
  }

• 步骤二：使用指定模块中的数据

  <template>
    <div>
      金额：{{money}} <br>
      <input type="button" value="累加" @click="addMoney(5)">
    </div>
  </template>
  
  <script>
  import {mapState, mapMutations} from 'vuex'
  export default {
    methods: {
      // ...mapMutations({'方法名':'模块/action名称'})
      ...mapMutations({'addMoney':'book/addMoney'})
    },
    computed: {
      //...mapState('模块名称',['变量'])
      ...mapState('book',['money'])
    }
  }
  </script>
  
  <style>
  
  </style>

3.3 完整vuex模板

// state为一个函数, 注意箭头函数写法
const state = () => ({
  user: 'jack'
})

// mutations为一个对象
const mutations = {
  setUser(state, value) {
    state.counter = value
  }
}
// action执行mutation
const actions = {
  userAction (context,value){
    // 可以发送ajax
    context.commit('setUser',value)
  }

}

// 获取数据
const getters = {
  getUser (state) {
    return state.user
  }
}
export default {
  namespace: true,	// 命名空间，强制要求，在使用时，加上所属的模块名，例如：book/addmoney
  state,
  mutations,
  actions,
  getters
}

3.4. nuxt流程总结