installation
Installation vue-cli npm i -g vue-cli
Build directory vue init webpack
Start the development environment npm run dev
Start command
npm install -g vue-cli
view webpack init-project view
cd project-view
npm run dev
vue-cli single file component
Using components of the Rings: the introduction of the component, registration component, use the component
Introduction means: import Hello from './components/hello'
Registered components: components: {Hello: Hello}
Use components:
Vuex
1. Centralized storage management state
changes in a predictable manner 2
Internal components of transient state: a state where only one component used in (data field)
Application Level Status: the status of the plurality of common components
Under what circumstances the use of Vuex
1. Multiple views depend on the same state
2. behavior from different views of the same state needs to be changed
Installation Vuex
NPM I vuex -save
In the src folder below to create stroe folder,
and then create the following folder store index, js files,
the introduction of components index.js
import Vue from 'vue'
import Vuex from 'vuex'
Use as a plug
Vue.use (Vuex)
Main.js then injected inside the root instance
injection root instance
{store}
Store in the component
in a defined state store folder The index.js
let store = new Vuex.Store({
//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
state: {
count: 110 //定义一个状态
}
})
In the component which use state, there are two methods
<script>
export default {
//data 只能在本组件被改变
data() {
return {
n: this.$store.state.count //n的初始值从vuex的state中拿
}
}
}
</script>
or
<p></p>
## Change Status
mutation (the only way to modify the state): To change status may be recorded, must commit to a mutation; mutation status must be updated simultaneously.
action (asynchronous operation): asynchronous operation to produce results; the Action is submitted mutation, rather than directly changing the state
mutation status change
index.js change the status of the store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//定义store
//vuex中的状态是响应的
let store = new Vuex.Store({
state: {
count: 110 //定义一个状态
},
mutations: {
updatedCount(state, payload) { //改变state状态
state.count += payload.add;
}
}
})
export default store
commit commit the changes
<script>
export default {
methods: {
changeCount() 大专栏 多个计数器在Vuex中的状态ss="p">{
this.$store.commit('updatedCount',{
add: 30
})
}
}
}
</script>
//getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
getters : {
totals(state){
//reduce 数组的方法
//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值,0表示和初始值为0.
return state.shopList.reduce((n,item) => n + item.count,0)
}
}
action (asynchronous operation): asynchronous operation to produce results; the Action is submitted mutation, rather than directly changing the state
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//mock数据
const shopList = [
{
id: 123,
count: 2,
},
{
id: 456,
count: 3
}
]
//定义store
//vuex中的状态是响应的
let store = new Vuex.Store({
//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
state: {
shopList //定义一个状态
},
//getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
getters : {
totals(state){
//reduce 数组的方法
//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值,0表示和初始值为0.
return state.shopList.reduce((n,item) => n + item.count,0)
}
},
//要使改变状态可被记录,必须要commit一个mutation; mutation必须是同步更新转态.
mutations: {
//只要提交mutation就有记录,如果mutation中有异步操作,记录的还是之前的值
updatedCountById(state,payload) { //改变state状态
/*setTimeout(() => {
let item = state.shopList.find(item => item.id == payload.id)
item.count += 1;
},3000);*/
let item = state.shopList.find(item => item.id == payload.id);
item.count += 1;
},
reduceCountById(state,payload) {
let item = state.shopList.find(item => item.id == payload.id)
console.log(payload)
if(item.count <= 0 ){
alert('数量不能少于0');
return false;
}
item.count -=1;
}
},
actions: {
updateCountAction(store, parmas) {
//异步操作放在这里
setTimeout(() => {
store.commit('updatedCountById', parmas)
},1000)
}
}
})
export default store
vuex use doctrine
in principle:
- Each application instance will only comprise a store
- The only way to change the status of the store is to submit mutation
- Mutation must be synchronized function
- Action may include any asynchronous operation
- Action is submitted mutation, rather than directly change the state
github Address: https://github.com/yyyyama/Vue-Project