创建 单独文件 store.js
//内部引用 import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex)
模块化
const store = new Vuex.Store({ state, getters, actions, mutations })
const state = { lists : [ {name : "cz", age : 20 }, {name : "cz", age : 20 }, ], count : 0 }
const getters = { cou : state => { return state.count },
list : state => { var listFor = state.lists.map( a => { return { name : a.name, age : a.age } return listFor } } }
const actions = { //加 add({commit}){ commit("muAdd") // }, //减 cut({commit}){ commit("muCut") }, //list ageAdd({commit},num){ commit("ageAdd",num) } }
const mutations = { muAdd: state => { state.count ++ }, muCut : state => { state.count -- }, ageAdd : (state,num) => { state.lists.forEach( element => {
element.age += num
}) } }
通过 this.$store 方法获取store内的数据 $store 是 vuex中的对象
在计算属性中直接return出想要的数据 如
computed:{ one(){ return this.$store.state.lists } },
或者
先把 想要获取的数据通过 import { } from "vue" 导入到 当前组件
再通过 ...mapActions([‘muAdd‘,‘muCut‘])
原文:https://www.cnblogs.com/chz1905/p/11304842.html