标签：const items js item state 使用 vuex id

以下通过添加购物车的简单案例来展示vuex用法

　　在项目中定义 store 文件夹，在文件夹下定义五个js（index.js/state.js/getter.js/mutations.js/actions.js/）

　　在index.js中引入其它4个js文件，并放在vuex中

      

state.js

定义初始化数据

const state = {
    items: []
}
export default state;

getter.js

计算属性

在vue组件中通过 mapGetters 引入

const getters = {
    items: (state) => {
        return state.items;
    }
}
export default getters;
在vue组件中引入计算属性返回的值
import { mapGetters } from 'vuex'

在计算属性中 通过扩展运算符 获取到返回的值
computed: {
    ...mapGetters(['items'])
}
<div> {{items}} </div> 直接渲染在界面中

mutations.js

同步操作

const mutations= {
  // 往数组中添加数据
  addShop: (state, producet) => {
      state.items.push({
          id: producet.id,
          title: producet.title,
          titleId: 1
      })
  },
  // 当添加相同的数据时，只让它的数量++
  insTrok: (state, producet) => {
      const curTime = state.items.find(item => item.id == producet.id)
      curTime.titleId++
  }
}
export default mutations;
在vue组件中通过 mapMutations 引入  import { mapGetters, mapMutations } from 'vuex'
在方法中 通过扩展运算符获取值
<div>
    <p v-for="(item, index) in list" :key="index"> 
        {{item.id}}  {{item.title}} 
        <button style="margin-left: 20px" @click.stop="addShop(item)"> 添加 </button><br/>
    </p>
</div>
methods: {
   ...mapMutations({
       addShop: 'addShop'
   })
}

actions.js

异步操作

const actions = {
    // 判断数组中是否存在添加的数据，存在则数量++，否则添加
    comShop: ({state, commit}, producte) => {
        const curTime = state.items.find(item => item.id == producte.id)
        if(!curTime){
            commit('addShop', {id: producte.id, title: producte.title})
        }else{
            commit('insTrok', curTime)
        }
    }
}

export default actions;

在vue组件中通过 mapActions 引入  import { mapGetters, mapMutations, mapActions } from 'vuex'
在方法中 通过扩展运算符获取值

<div>
    <p v-for="(item, index) in list" :key="index"> 
        {{item.id}}  {{item.title}} 
        <button style="margin-left: 20px" @click.stop="addShop(item)"> 添加 </button><br/>
    </p>
</div>
methods: {
    ...mapActions({
        addShop: 'comShop'
    }),
},

标签：const,items,js,item,state,使用,vuex,id
来源： https://www.cnblogs.com/wj000/p/15239616.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。