-
vueX适用于多组件间的状态共享
查看全部 -
应用场景
多个视图依赖于统一状态
来自不同视图的行为需要改变同一个状态
查看全部 -
store的getter类似computer属性
查看全部 -
做分享的事件时，需要修改会员状态，把这个事情放到store的action中去写，而不在业务页面的分享动作里直接去写状态值修改，会显得逻辑比较清晰，利于维护。
查看全部 -
vuex安装
查看全部 -
vuex的组成介绍
查看全部 -
vuex用于复杂 单页面应用，中大型，不适合简单查看全部
-
vuex的组成介绍
查看全部 -
state 数据库，getter获取数据查看全部
-
安装vuex：npm install vuex
创建实例：new Vuex.store()
main.js中将vuex实例挂载到vue对象上
查看全部 -
State --数据仓库，所有的数据都存储于state中，数据唯一源，属于 json 对象
getter --用来获取数据的
Mutation -- 用来修改数据的，数据一定要同步的
Action --用来提交mutation数据，可以异步提交
查看全部 -
在main.js中写入
new Vuex.Store({
state:{count:0},
mutations{
conuntIncreaseP(state){
state.count++
}
}
}}
【通过两种方式获取，store实列获取，通过mutation获取】
{{ this.$store.state.count}}
【通过点击事件改变count】
<button> @click="countcrease">点击我</button>
methods{
countcrease（）{
this.$store.commit('conuntIncreaseP')
}
}
【mutation 的传值】
new Vuex.Store({
state:{count:0},
mutations{
conuntIncreaseP(state,value){
state.count = value;
}
}
}}
====
methods{
countcrease（）{
this.$store.commit('conuntIncreaseP',100)
}
}
查看全部 -
通过vue-cli来创建项目
vue create vuex-deme --default(默认)
npm install vuex 或者yarn add vuex
在main.js文件写入
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:0
}
})
new Vue({
store,
render:h=>h(App)
}).$mount("#app")
npm run server 或者yarn server
查看全部 -
Vuex install
npm install vuex
new Vuex.store()--创建实列
将main.js中将vuex实例挂载到vue对象
查看全部 -
【VueX 组成】
State --数据仓库
getter --用来获取数据的
Mutation -- 用来修改数据的
Action --用来提交mutation
查看全部
举报